Question

我是JQuery的新手，并且已经阅读了一些关于循环和动画的内容。我的想法是拥有一个并让其中的每个<li>淡入并淡出，然后移动到下一个<li>。

我已经设法让淡入淡出工作但是一旦它到达终点就停止了。一旦它到达终点，它再次启动的最佳方法是什么？

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>

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

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

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

DEMO： http://jsfiddle.net/mW9xf/

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

    }

});

Example

JQuery - 无法重新启动动画循环

4 个答案: