jQuery 动画透明

Question

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

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

有什么解决办法吗？

Answer 1

您可以使用 rgba(...) （在此处查看浏览器支持）。

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 上的 div。

示例。

在图像上列出项目的示例。

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

Answer 5

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

Answer 6

我认为您需要使用 颜色插件。

Answer 7

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

我会将每个“.block li”元素拆分为两个元素：一个是可以使用 $.fadeTo() 进行动画处理的背景元素，另一个元素位于顶部，其中包含前景内容，您可以在其上使用您的处理程序调用 $.hover() 。

Answer 8

$(".block li").hover(
功能（）{
$(this).animate({backgroundColor: "#000"});
},
功能（）{
$(this).animate({backgroundColor: $(this).parent().css("backgroundColor") });
}
）；

Answer 9

我从以下位置找到了此问题的解决方案这个链接

$('#test').animate({

backgroundColor: "#DFC21D",

}, 1000, function() {

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

});