卡在淡入淡出

Posted 2023-05-08

【中文标题】卡在淡入淡出

【英文标题】：stuck with fadeTo

【发布时间】：2011-08-19 16:38:36

【问题描述】：

我正在尝试淡入/淡出我的超链接。我使用了 fadeTo() 而不是 fadeOut 看到 fadeOut 摆脱了超链接。使用fadeTo，情况并非如此，超链接仍然存在，但不透明度值非常低。我想知道是否可以淡出 a.active 背景并且仍然能够看到正文的文本和底层背景

var fade_to = function()       
    $("a.active").fadeTo("slow", 0.0001);
;

$(document).ready(function()   
    $("a.active").css("display", "none").fadeIn(2000);
    var intervalId = window.setInterval(fade_to, 5000);
);
a.active 
    background: #ff0000;
    width: 246px;
    height: 47px;
    padding-top: 3px;       
    color:  #ffffff;

body 
    background: #000000
  

【参考方案1】：

这个问题的答案应该和this问题的答案差不多；这与使用 <span/> 元素做同样的事情有关。

【参考方案2】：

如果我理解正确，您需要淡化背景颜色以包含不透明度，例如从 rgba(255,0,0,1) 到 rgba(255,0,0,0)。这在较旧的浏览器中不起作用，因为它们不理解 rgba 颜色，但对于任何当前的浏览器，它都可以。 jQuery 不了解如何为颜色设置动画，因此您需要使用以下内容： http://roxority.com/sharepoint-zen/jquery-color-animations-adding-rgba-alpha-channel-support.html 与 jQuery 结合使用。

如果您真的想这样做，使用 CSS 过渡可能是更好的选择，因为几乎所有 rgba 所在的地方都支持它们。

【参考方案3】：

您可以完全删除a.active 背景或将其设置为transparent。

这可能会做你想做的事：

$("a.active").css("background", "none").fadeTo("slow", 0.0001);

或者

$("a.active").css("background", "transparent").fadeTo("slow", 0.0001);

两者的效果相同，但不会淡出背景。

这是另一个提到褪色背景的问题。 How do I animate a background color to transparent in jQuery?

这可能对您有更多帮助。

【讨论】：

我究竟怎样才能做到这一点？