如何循环此jQuery动画

Question

我在上千个教程之后创建了这个jQuery脚本，并且只走了这么远，当它到达最后一张幻灯片时它就冻结了，我怎么能循环它呢

$(document).ready(function(){
    $('.slide').hide();
    $('.slide-1').fadeIn('slow').delay(2000).fadeOut('slow',function(){
        $('.slide-2').fadeIn('slow').delay(2000).fadeOut('slow', function(){
            $('.slide-3').fadeIn('slow').delay(2000).fadeOut('slow',function(){
                $('.slide-4').fadeIn('slow').delay(2000).fadeOut('slow');
            });
        });
    });
}); 

Answer 1

将您的动画放入一个函数中，当您到达最后一步时，从其自身内部再次调用该函数。这叫做递归。

function animate()
{
   $('.slide').hide();
    $('.slide-1').fadeIn('slow').delay(2000).fadeOut('slow',function(){
        $('.slide-2').fadeIn('slow').delay(2000).fadeOut('slow', function(){
            $('.slide-3').fadeIn('slow').delay(2000).fadeOut('slow',function(){
                $('.slide-4').fadeIn('slow').delay(2000).fadeOut('slow',animate);

            });
        });
    }); 
}
$(document).ready(function(){
    animate();
}); 

注意:你可能想微调一下在哪里会发生什么。

Answer 2

它可能会锁定你的渲染线程，所以尝试这样做: setTimeout将在不锁定ui的情况下执行工作，这是递归的-适用于幻灯片1到幻灯片4，然后再次从1开始

var slides = [".slide-1",".slide-2",".slide-3",".slide-4"];

function slide(id){
    $(slides[id]).fadeIn('slow').delay(2000).fadeOut('slow', function(){
        slide(id%slides.length);
    });
}

$(function(){
    $('.slide').hide();
    setTimeout(function() {
        slide(1);
    }, 0);
}); 

Answer 3

通过保存幻灯片数组并只使用一次fadeIn/fadeOut代码，可以简化此代码：

​

$('.slide').hide();
var slides = [".slide-1",".slide-2",".slide-3",".slide-4"];

(function next(i){
     var slide = slides[i%slides.length];
    $(slide).fadeIn('slow').delay(2000).fadeOut('slow',function(){
        next(i+1);
    });
})(0)

.slide{
    width:100px;
    height:100px
}

.slide-1{
 background-color:red
}
.slide-2{
 background-color:blue
}
.slide-3{
 background-color:green
}
.slide-4{
 background-color:yellow
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slide-1 slide"></div>
<div class="slide-2 slide"></div>
<div class="slide-3 slide"></div>
<div class="slide-4 slide"></div>

​