Как повторить (зациклить) Jquery fadein-fadeout-fadein

Я борюсь со своим первым скриптом jQuery. У меня есть DIV на моей странице, который скрыт с помощью CSS. Затем у меня есть этот скрипт, который запускается, чтобы заставить его исчезать, исчезать, а затем снова исчезать:

<script type="text/javascript">
  (function($) {
    $(function() {
      $('#abovelogo').fadeIn(1000).delay(2000).fadeOut(1500).delay(2000).fadeIn(1500);
    }); 
  })(jQuery);
</script>

Эта часть работает нормально. Теперь мой вопрос:

Как мне изменить его, чтобы этот скрипт запускал циклы (навсегда), а не только один раз?

Заранее спасибо! -Нейт


person c2oxide    schedule 16.02.2012    source источник


Ответы (3)


Поместите свой код внутри setInterval:

$(function () {
    setInterval(function () {
        $('#abovelogo').fadeIn(1000).delay(2000).fadeOut(1500).delay(2000).fadeIn(1500);
    }, 5000);
});

Поскольку вы будете выполнять это, пока страница активна, вы должны сделать все возможное, чтобы оптимизировать свой код, например, вы можете кэшировать выбор вне интервала:

$(function () {
    var $element = $('#abovelogo');
    setInterval(function () {
        $element.fadeIn(1000).delay(2000).fadeOut(1500).delay(2000).fadeIn(1500);
    }, 5000);
});

Документы для setInterval: https://developer.mozilla.org/en/window.setInterval

Кроме того, вместо использования .delay() вы можете использовать функции обратного вызова в каждой анимации для вызова одной анимации за другой:

$(function () {
    var $element = $('#abovelogo');
    setInterval(function () {
        $element.fadeIn(1000, function () {
            $element.fadeOut(1500, function () {
                $element.fadeIn(1500)
            });
        });
    }, 5000);
});

Вот демонстрация: http://jsfiddle.net/xsATz/

Вы также можете использовать setTimeout и рекурсивно вызывать функцию:

$(function () {
    var $element = $('#abovelogo');
    function fadeInOut () {
        $element.fadeIn(1000, function () {
            $element.fadeOut(1500, function () {
                $element.fadeIn(1500, function () {
                    setTimeout(fadeInOut, 500);
                });
            });
        });
    }

    fadeInOut();
});

Вот демонстрация: http://jsfiddle.net/xsATz/1/

person Jasper    schedule 16.02.2012

<script type="text/javascript">
function doFade() {
    $('.foo').toggleClass('fooAct');
    setTimeout(doFade, 1000);
}
$(document).ready(function(){
    doFade();
});
</script>
<style>
div {
height:200px;
background:black;   
}
.foo {
transition: opacity 2s;
-moz-transition: opacity 2s; /* Firefox 4 */
-webkit-transition: opacity 2s; /* Safari and Chrome */
-o-transition: opacity 2s; /* Opera */
opacity:0.1;
}
.fooAct {
opacity:1;
}
</style>
<div class="foo"></div>

просто для воображения. Вы можете сделать это с помощью css3. Надеюсь, это поможет и вам. Делая такие вещи, css должен быть более удобным для производительности браузера, чем jQuery.

person littlealien    schedule 16.02.2012

У меня есть некоторые проблемы с методом setTimeout. Может лучше с "триггером":

var $element = $('.banner');
$element.bind('cusfadeOut',function() {
        $(this).fadeOut(500,function() {
                $(this).trigger('cusfadeIn');
        });
});
$element.bind('cusfadeIn',function() {
        $(this).fadeIn(1000, function() {
                $(this).trigger('cusfadeOut');
        });
});
$element.trigger('cusfadeOut');
person gabrielperezs    schedule 19.02.2013
comment
Я не уверен, что это квалифицируется как ответ. Не могли бы вы немного пояснить? - person Cameron Fredman; 19.02.2013
comment
При использовании Timeout может случиться так, что событие fadeIn будет выпущено до окончания fadeOut (в зависимости от того, насколько подходит время). С триггерами такого не бывает. Запускается только после завершения fadeIn, fadeOut, и вы можете определить любой тайминг, не настраивая тайм-ауты. - person gabrielperezs; 20.03.2013