编辑：

Question

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

需要将#fff更改为无颜色。动画应该从#000发送到transparent。

任何解决方案？

Answer 1

您可以使用rgba(...)（see browser support here）。

var elem = $('#foo')[0];

$({
    r: 0,
    g: 0,
    b: 0,
    a: 1
}).animate({
    a: 0
}, {
    step: function() {
        elem.style.backgroundColor =
            'rgba(' +
                ~~this.r + ',' + ~~this.g + ',' + ~~this.b + ',' +
                ~~(this.a*100)/100 +
            ')';
    },
    duration: 1000
});

~~是最低价值，否则你最终会得到像rgba(0.1029302...这样的内容。

Answer 2

~~取代更改背景颜色，删除该属性！~~

代码简单如下：

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

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

要使它工作，你需要jQuery和jQuery UI。完全符合您的要求（颜色除外）！

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

编辑：

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

Answer 3

修改：我已对此进行了测试，但确实有效。

创建两个类。一个有背景：＃000和一个有背景：透明;

为＃000背景类设置toggleClass或removeClass的动画。

示例：

jQuery('.block li').hover(function() {
  $(this).toggleClass('blackClass', 'fast' );
}

CSS：

.blackClass { background: #000; }

Answer 4

这可能有用。它以一个背景颜色onMouseOver为前缀，然后淡出并删除div onMouseOut。

Example.

Example with list items over an image.

祝你好运，希望这会有所帮助。

Answer 5

为什么不使用不透明度CSS3标签？

Answer 6

我认为你需要使用color plugin。

Answer 7

这可能需要对您的HTML和CSS进行一些更改（如果您没有直接的HTML / CSS控件，可能会受到脚本的影响）。

我会将每个'.block li'元素分成两个元素：一个是可以用$ .fadeTo（）动画的背景元素，另一个元素放在顶部，包含你的前景内容和你可以用你的处理程序调用$ .hover（）。

Answer 8

$（“。block li”）。悬停（功能（）{ $（this）.animate（{backgroundColor：“＃000”}）; }，功能（）{ $（this）.animate（{backgroundColor：$（this）.parent（）。css（“backgroundColor”）}）; } ）;

Answer 9

I got a solution to this issue from this link

$('#test').animate({

backgroundColor: "#DFC21D",

}, 1000, function() {

$('#test').css("backgroundColor","transparent");

});

jQuery动画到透明

9 个答案:

编辑：