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的情况下执行工作，这是递归的 - 为slide-1工作为slide-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>

Answer 4

试

以最简单的方式使用next（）循环动画

$(document).ready(function () {
    $('.slide').hide();
    animate($(".slide-1"));
});

function animate(curr) {
    curr.fadeIn('slow').delay(2000).fadeOut('slow', function () {
        animate((curr.next().length) ? curr.next() : $(".slide-1"));
    });
}

<强> DEMO

如何循环这个jQuery动画

4 个答案: