Question

如何让这个动画从头开始连续重复？ http://jsfiddle.net/philoman/RuX5d/8/

$(document).ready(function() {
var i = 1, dir = 1, curFx = 'fadeIn';
var interval = setInterval(function () {
    if (i == 2 && $('#slide1').is(':visible')) {
        $('#slide1').fadeOut(6000);             
        return;
    }

    $('#slide'+ i)[curFx](1500);

    i = i + 1*dir;

    if (i == 10 || i == -1) {
        dir = (dir == 1)?-1:1;
        curFx = (curFx == 'fadeIn')?'fadeOut':'fadeIn';
    }        
}, 1500);
});

Answer 1

使用异步递归。

$(document).ready(function me() {
    $("#slide1").fadeIn(100).delay(100).fadeOut(100, function () {
        (function startFade(slide, step) {
            if ((slide === 1) && (step === -1)) {
                setTimeout(me, 100);
            } else if (slide < 10) {
                $("#slide" + slide)[step === 1 ? "fadeIn" : "fadeOut"](100, function () {
                    startFade(slide + step, step);
                });
            } else {
                startFade(slide - step, -step);
            }
        }(2, 1));
    });
});

Answer 2

制作一个回滚到开头的功能。

function loopback(){
...
   //inside your innermost fn:
   loopback();  
...
}

Answer 3

我的版本有点短：

function animate(slide){
     slide.fadeIn(500, function() {
        var next = slide.next();
         if(next.length > 0){
              animate(next);
         }
     });
}

$(document).ready(function() {
    animate($('#slide1'));
});

演示：http://jsfiddle.net/RuX5d/6/

jQuery循环命令

3 个答案: