JQuery-Can'；不要让我的动画循环重新启动

我对JQuery真的很陌生，读过一些关于循环和动画的书。我的想法是在移动到下一个

之前，让每个
的内部淡入淡出

我已经设法让淡入淡出工作，但一旦到了最后它就停止了。当它到达终点时，什么是让它重新开始的最好方法

JQuery：

<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>


$（文档）.ready（函数（）{
$（'.fader>li'）.hide（）；
var持续时间=1000；
$（'.fader>li'）。每个（函数（i）{$（this）.delay（i*（duration*2））.fadeIn（duration.fadeOut（duration）；}）；
});

HTML


清单项目1
清单项目2
清单项目3
清单项目4


$（文档）.ready（函数（）{
$（'.fader>li'）.hide（）；
var持续时间=1000；
变量t；
褪色（）；
函数fade（）
{
$（'.fader>li'）。每个（函数（i）{
$（此）。延迟（i*（持续时间*2））
.fadeIn（持续时间）
.衰减（持续时间）；
} );
t=设置超时（淡入淡出，2000）；
}
});

$（文档）.ready（函数（）{
$（'.fader>li'）.hide（）；
var持续时间=1000；
变量t；
褪色（）；
函数fade（）
{
$（'.fader>li'）。每个（函数（i）{
$（此）。延迟（i*（持续时间*2））
.fadeIn（持续时间）
.衰减（持续时间）；
} );
t=设置超时（淡入淡出，2000）；
}
});

演示：

演示：
不使用正确的
延迟来执行此操作，而是更容易使用可选的回调，该回调可以传递到
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});

例如：
使用右侧的
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});

实例：
以下内容应满足您的需要，不会出现延迟问题（一次出现多个项目）：

以下各项应满足您的需要，不会出现延迟问题（一次出现多个项目）：

认为
2000
应该基于
持续时间
可能？可能，也可能是任意值。取决于什么看起来和感觉最好。认为
2000
应该基于
duration
可能？可能，也可能是任意值。取决于什么看起来和感觉最好。我自己也试过了。。。发现它造成了轻微的滞后。我不会投反对票，但你测试了多长时间？@Daedalus你对
setInterval
的看法是对的。它的效果非常糟糕。欢迎新的更新版本：）发送到地狱所有延迟。我自己尝试设置间隔。。。发现它造成了轻微的滞后。我不会投反对票，但你测试了多长时间？@Daedalus你对
setInterval
的看法是对的。它的效果非常糟糕。欢迎新的更新版本：）发送到地狱所有延迟。它有一个睡眠后，第四次淡出。删除
setTimeout
，不需要它。@谢谢提示：）它在第四次淡出后有一个睡眠。删除
setTimeout
，不需要它。@VisioN谢谢提示：）
$('.fader').cycle({duration:1000});

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

    }

});​