jquery - JQuery - 无法让我的动画循环重新启动

Question

我对 JQuery 真的很陌生，并且已经阅读了一些关于循环和动画的内容。我的想法是<li>在移动到下一个之前让其中的每个 's 淡入淡出<li>。

我已经设法让淡入和淡出工作，但一旦它到达终点，它就会停止。一旦到达终点，让它重新开始的最佳方法是什么？

查询：

<script>
$(document).ready(function(){

$('.fader > li').hide();

var duration = 1000;

$('.fader > li').each(function(i){ $(this).delay( i * (duration * 2) ).fadeIn(duration).fadeOut(duration); } );


});
</script>

HTML

<ul class="fader">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
</ul>

Answer 1

而不是用正确的方法来做这件事，delay它更容易使用可以传递给fadeIn/的可选回调，fadeOut它在动画完成时被调用。

然后，您可以将这一切包装在一个漂亮、简单的插件中：

(function($){
    $.fn.cycle = function(options){
       var settings = $.extend({duration:1000},options) ;

       this.children().hide();
       doSequence(this.children(),0);        

       function doSequence ($elems, i){
           var next = (i == $elems.length-1) ? 0 : i+1;
           fadeInThenOut($elems.eq(i),function(){ doSequence($elems, next) });;       
       }
       function fadeInThenOut ($elem,callback){
           $elem.fadeIn(settings.duration,function(){
               $elem.fadeOut(settings.duration,callback);
            });
       }           
    };


})(jQuery);

然后使用变得非常简单：

$('.fader').cycle({duration:1000});

现场示例：http: //jsfiddle.net/VZJTL/

Answer 2

var len = $('.fader > li').hide().length;
var duration = 1000;

function animate(i) {
    $('.fader > li:eq(' + i++ +')').fadeIn(duration).fadeOut(duration, function() {
        animate(i == len ? 0 : i);
    });
}

animate(0);​

演示：http: //jsfiddle.net/mW9xf/

Answer 3

<script>
$(document).ready(function(){

$('.fader > li').hide();

var duration = 1000;
var t;

fade();

function fade()
{
    $('.fader > li').each(function(i){ 
        $(this).delay( i * (duration * 2) )
            .fadeIn(duration)
            .fadeOut(duration); 
    } );
    t = setTimeout(fade, 2000);

}

});
</script>

Answer 4

以下应该可以满足您的需要，而不会出现滞后问题（一次出现多个项目）：

$(document).ready(function() {

    $('.fader > li').hide();
    fade();

    function fade() {
        var duration = 1000;
        $('.fader > li').each(function(i) {
            $(this).delay(i * (duration * 2)).fadeIn(duration).fadeOut(duration, function() {
                if ((i + 1) == $('.fader > li').length) {
                    fade();
                }
            });
        });

    }

});​

例子