jQuery循环命令 [英] jQuery looping command

问题描述

如何使动画从头开始连续重复? http://jsfiddle.net/philoman/RuX5d/8/

How can I make this animation repeat continuously from the beginning? 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);
});

推荐答案

使用异步递归.

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

这篇关于jQuery循环命令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！