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 这基本上是它的包装器。例如（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);
      }
    }
})();