jQuery动画到透明

Posted 2023-05-08

【中文标题】jQuery动画到透明

【英文标题】：jQuery animate to transparent

【发布时间】：2011-04-10 10:35:14

【问题描述】：

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

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

有什么解决办法吗？

【问题讨论】：

你试过transparent吗？它不工作吗？它是有效的 CSS。不确定 jQuery 是否支持动画。

透明不起作用

How do I animate a background color to transparent in jQuery? 的可能重复项

@WorkingHard - 没有接受的解决方案。不代表没有。其次，您的问题与另一个问题完全相同。至少，你可以在你的问题中指出它并说：“已经尝试过这个东西......不起作用。”如果你走那条路，那么人们就会知道你已经看过/尝试过它，并且不会标记重复项。

再次提出问题并没有错，尤其是在所有途径都尚未探索的情况下。 close旅应该后退！

【参考方案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... 这样的东西。

【参考方案2】：

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

代码很简单：

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

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

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

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

编辑：

嗯...发现toggleClass 时不时会出问题。最好在悬停时使用addClass，在鼠标移出时使用removeClass。

【讨论】：

如何用一些动画来删除它？喜欢从黑色到无色

api.jquery.com/animate - 通读并了解如何使用持续时间、缓动。有了这些，你就可以达到你想要的效果！

鼠标移出时通常不隐藏背景

P.S.我们不必为您提供完美的解决方案。尝试自己解决，最终你会从中受益！

-1 用于链接 jsfiddle 而不在这里提供代码。修复后请通知我，我将删除反对票。

【参考方案3】：

编辑：我已经对此进行了测试，并且可以正常工作。

创建两个类。一张有背景：#000，一张有背景：透明；

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

示例：

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

CSS：

.blackClass  background: #000; 

【参考方案4】：

这可能有效。它在一个新的 div 前面加上背景颜色 onMouseOver，然后淡出并删除 div onMouseOut。

Example.

Example with list items over an image.

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

【参考方案5】：

为什么不使用 opacity CSS3 标签？

【讨论】：

您可以像现在在代码中为 backgroundColor 值设置动画一样，为 opacity 值设置动画。

【参考方案6】：

我认为您需要使用color plugin。

【参考方案7】：

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

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

【参考方案8】：

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

【讨论】：

这是我最初的想法，但如果有背景图片，这可能行不通。

【参考方案9】：

I got a solution to this issue from this link

$('#test').animate(

backgroundColor: "#DFC21D",

, 1000, function() 

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

);