0

我试图在循环中重复整个功能，但没有任何效果。我试过Loop()回调，设置interval()。有人可以指出我正确的方向吗？

重复整个动画的最佳方法是什么？谢谢

$(document).ready(function() {
    $("#slide1").fadeIn(500, function() {
        $("#slide2").fadeIn(500, function() {
            $("#slide3").fadeIn(500, function() {
                $("#slide4").fadeIn(500, function() {
                    $("#slide5").fadeIn(500, function() {

                        $("#slide1").fadeOut(500, function() {

                            $("#slide6").fadeIn(500, function() {
                                $("#slide7").fadeIn(500, function() {
                                    $("#slide8").fadeIn(500, function() {
                                        $("#slide9").fadeIn(500, function() {});
                                    });
                                });
                            });
                        });
                    });
                });
            });
        });
    });
});
4

5 回答 5

3

@Phillip所以你现在的问题是什么......你只是希望代码是即兴的......对吗？– 维加

嗨，维加。是的，代码运行良好，但希望$("#slide1").fadeOut(500, function() {发生。谢谢——菲利普

转换了你下面的代码，

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

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

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

        i = i + 1*dir;

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

我不太确定你想要什么.. 但我相信你想要fadeIn并fadeOut满足于反复。

如果是这样，请尝试下面的演示和代码，

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

$(document).ready(function() {
    var curSlide = 0, dir = 1;
    var curFx = 'fadeIn';
    setInterval(function () {
        curSlide += 1 * dir;
        $('#slide' + curSlide)[curFx](500);
        if (curSlide == 11 || curSlide == 0) {
            curFx = (curFx == 'fadeIn')?'fadeOut': 'fadeIn';
            dir = (dir == 1)?-1: 1;
        }
    }, 500);
});
于 2012-11-21T19:11:56.383 回答
1

使用setTimeout. IDK你到底想怎么做......但可能是这样的：

var i = 1;
$(document).ready(function(){ 
  setTimeout(function(){ 
    var slide = '#slide' + i++;
    $(slide).fadeIn();}, 500); 
});
于 2012-11-21T19:05:04.287 回答
0

这应该可以处理您要查找的内容

function fadeFn() {
    if (curNum < 10) {
        if (direction === 'Out') {
            direction = 'In';
            curNum++;
        }
        else {
            direction = 'Out';
        }
        $("#slide" + curNum)['fade' + direction](500, fadeFn);
    }
}

var curNum = 0;
var direction = 'Out';
$(document).ready(function() {
    fadeFn();
});
于 2012-11-21T19:04:53.230 回答
0

像这样的函数应该完成你想要做的事情：

function fadeInRepeat(start, max){
    if(start++ < max){
        $("#slide" + start).fadeIn(500, function() {
            fadeInRepeat(start, max);
        }
    }
}

只需调用fadeInRepeat(1,10)以替换您的原始代码。

于 2012-11-21T19:06:25.500 回答
0

你可以递归。这是一个简短的版本：

function slider(count, asc) {
    var count = count || 1;
    if (!typeof(asc) == "boolean"||count == 10||count == 1) asc = !asc;
    $("#slide"+count)[asc?"fadeIn":"fadeOut"](500, (function() {
        return function() {
            slider(asc ? ++count : --count, asc);
        };
    })());
}
slider();

在这里看到它：http: //jsfiddle.net/K8pbS/1/

于 2012-11-21T19:07:29.610 回答