Question

我试图在循环中重复整个函数，但没有任何作用。我试过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() {});
                                    });
                                });
                            });
                        });
                    });
                });
            });
        });
    });
});

Answer 1

@Phillip所以你在问题中的所有内容现在都有效......你只是希望代码能够即兴创作。这是正确的吗？ - 维加

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

转换下面的代码，

DEMO： 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内容。

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

DEMO： 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);
});

Answer 2

使用setTimeout。 IDK你究竟想要做到这一点......但可能是这样的：

var i = 1;
$(document).ready(function(){ 
  setTimeout(function(){ 
    var slide = '#slide' + i++;
    $(slide).fadeIn();}, 500); 
});

Answer 3

这应该可以处理你想要的东西

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

Answer 4

这样的功能应该可以完成你想要做的事情：

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

只需致电fadeInRepeat(1,10)即可替换原始代码。

Answer 5

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

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/

功能重复（简单）

5 个答案: