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

Question

我想将 div 背景不透明度更改为 100% 到 0%，然后再次连续更改为 0% 到 100%。我将如何使用 jQuery 来做到这一点？这是我现在拥有的标记和 CSS。

HTMLCSS

<div id="sample_div">

</div>

​

#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 本身无法设置颜色动画。有一个 颜色插件 可能可以做到这一点（我没有尝试过）， 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);
    }
})();

或者使用计数器（实时副本）：

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