使用jquery连续div背景不透明度更改

我想将div背景不透明度更改为100％至0％，并且再次将0％更改为100％。我将如何去做这个与jQuery？这里是我现在有的标记和CSS。使用jquery连续div背景不透明度更改

HTML

<div id="sample_div"> 

</div>

CSS

#sample_div{ 
    width:300px; 
    height:200px; 
    background:#65c6ed; 
}

来源

2011-07-31 Sasindu H

未来（即当所有的浏览器都支持它），你就可以只用CSS3做到这一点： http://jsfiddle.net/kaktus621/qxHCu/1/（这当前只适用于Webkit浏览器，因此对于您的问题没有有效的解决方案） –

您在jQuery代码上的进展如何？在jsfiddle中没有。 – Janez

是的。它是空的。我不知道该怎么做。但我知道它可以使用jQuery来完成。 –

您可以使用jQuery的animate功能来做到这一点，或fadeIn和fadeOut它们基本上包装器了。例如（live copy）：

(function() { 
    var div = $("selector_for_your_div"); 

    doFadeIn(); 

    function doFadeIn() { 
     div.fadeIn("slow", doFadeOut); 
    } 

    function doFadeOut() { 
     div.fadeOut("slow", doFadeIn); 
    } 
})();

你可能想要把终止条件在那里，不过，因为否则它会一直永远和变老快速。因此，例如（live copy）：

(function() { 
    var div = $("#target"), 
     countdown = 3; 

    doFadeIn(); 

    function doFadeIn() { 
     div.fadeIn("slow", doFadeOut); 
    } 

    function doFadeOut() { 
     if (--countdown >= 0) { 
      div.fadeOut("slow", doFadeIn); 
     } 
    } 
})();

更新：你曾说过下面要设置动画的背景颜色。这和上面的原理是一样的，但jQuery本身不能为动画制作颜色。有一个color plug-in可能能够做到这一点（我还没有尝试过），并且jQuery UI扩展animate也可以做到这一点。例如（live copy）：

(function() { 
    var div = $("#target"); 

    doFadeIn(); 

    function doFadeIn() { 
     div.animate({ 
     backgroundColor: "#eeeeee" 
     }, "slow", doFadeOut); 
    } 

    function doFadeOut() { 
     div.animate({ 
     backgroundColor: "#ffffff" 
     }, "slow", doFadeIn); 
    } 
})();

或者与计数器（live copy）：

(function() { 
    var div = $("#target"), 
     counter = 3; 

    doFadeIn(); 

    function doFadeIn() { 
     div.animate({ 
     backgroundColor: "#eeeeee" 
     }, "slow", doFadeOut); 
    } 

    function doFadeOut() { 
     if (--counter >= 0) { 
     div.animate({ 
      backgroundColor: "#ffffff" 
     }, "slow", doFadeIn); 
     } 
    } 
})();

来源

2011-07-31 08:24:55

我想只动画背景颜色。而不是文字。 –

@Sassi：这是一样的原则。我已经添加了更新，请参阅上文。 –

使用jquery连续div背景不透明度更改

回答

相关问题