div背景不透明度使用jquery不断变化

Question

我想将div背景不透明度更改为100%至0%,并再次将0%更改为100%.我将如何使用jQuery执行此操作？这是我现在拥有的标记和CSS.

HTML

<div id="sample_div">

</div>

CSS

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

Answer 1

您可以使用jQuery的animate功能,要做到这一点,或者fadeIn和fadeOut它基本上是为它的包装.例如(实时复制):

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

    doFadeIn();

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

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

但是,您可能希望在此处设置终止条件,因为否则它将永远持续下去并快速变老.所以例如(实时复制):

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

    doFadeIn();

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

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

更新:您在下面说过要为背景颜色设置动画.它与上面的原理相同,但jQuery本身不能为颜色设置动画.有一个颜色插件可以做到(我还没有尝试过),jQuery UI也扩展animate到了它.例如(实时复制):

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

    doFadeIn();

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

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

或者用柜台(实时复印件):

(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);
      }
    }
})();