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

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

1 个答案: