Непрозрачность фона 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

Вы можете использовать для этого функцию animate jQuery или fadeIn и fadeOut, которые в основном являются обертками для нее. Например ( живая копия ):

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

    doFadeIn();

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

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

Возможно, вы захотите поместить в него условие завершения, потому что в противном случае оно будет продолжаться вечно, и оно стареет fast . Например, ( живая копия ):

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

    doFadeIn();

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

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

---

Обновление : Вы сказали ниже, что хотите анимировать цвет фона. Это тот же принцип, что и выше, но JQuery сам по себе не может анимировать цвета. Есть цветной плагин , который может это сделать (я не пробовал), и пользовательский интерфейс jQuery расширяет 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);
      }
    }
})();