jQuery设置为透明动画 [英] jQuery animate to transparent

问题描述

$(".block li").hover(
    function(){
        $(this).animate({backgroundColor: "#000"});
    },
    function(){
        $(this).animate({backgroundColor: "#fff"});
    }
);

需要将#fff更改为无颜色.动画应该出现在#000到transparent之间.

Need to change #fff to no color. Animation should occur from #000 to transparent.

有解决方案吗?

推荐答案

不要更改背景颜色，而是删除该属性！

代码很简单:

$("li").hover(
    function(){
        $(this).toggleClass('hover', 1000);
    },
    function(){
        $(this).toggleClass('hover', 2000);
    }
);

示例: http://jsfiddle.net/rdWTE/

要使其正常工作，您需要jQuery和jQuery UI.确实满足您的要求(颜色除外)！

For it to work, you need jQuery and jQuery UI. Does exactly what you wanted (except the colors)!

jQuery脚本中的这些数字代表以毫秒为单位的动画持续时间.

Those numbers in jQuery script stand for animation duration in milliseconds.

嗯...发现toggleClass可能会不时地出错.最好在悬停时使用addClass，在鼠标移出时使用removeClass.

Uhm... Found out that toggleClass can bug from time to time. Better to use addClass on hover, and removeClass on mouse out.

这篇关于jQuery设置为透明动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！