javascript - jQuery循环动画从头开始

Question

我希望这个动画每次都从头开始重复（#slide1）。

我尝试了 setTimeout 方法，但无法让它工作。由于时间差异和（缺乏知识），我逐行使用简单的行。谢谢你的帮助。

$(document).ready(function () {
$("#slide1").fadeIn(2000, function () {
$("#slide1").delay(4000).fadeOut(2000);
$("#slide2").delay(6000).fadeIn(1000, function () {
$("#slide3").fadeIn(1000, function () {
$("#slide4").fadeIn(1000, function () {
$("#slide5").fadeIn(1000, function () {
$("#slide6").fadeIn(1000, function () {
$("#slide7").fadeIn(1000, function () {
$("#slide8").fadeIn(1000, function () {
$("#slide9").fadeIn(1000, function () {
$("div").delay(2000).fadeOut(1000, function () {});
});
});
});
});
});
});
});
});
});
});

<div id="slide1">Slide 1</div>
<div id="slide2">Slide 2</div>
<div id="slide3">Slide 3</div>
<div id="slide4">Slide 4</div>
<div id="slide5">Slide 5</div>
<div id="slide6">Slide 6</div>
<div id="slide7">Slide 7</div>
<div id="slide8">Slide 8</div>
<div id="slide9">Slide 9</div>
<div id="slide10">Slide 10</div>

score 1 · Accepted Answer

检查以下JSFiddle ...

$(document).ready(function () {

    (function animate() {
        $("#slide1").fadeIn(2000, function () {
            $("#slide1").delay(4000).fadeOut(2000);
            $("#slide2").delay(6000).fadeIn(1000, function () {
                $("#slide3").fadeIn(1000, function () {
                    $("#slide4").fadeIn(1000, function () {
                        $("#slide5").fadeIn(1000, function () {
                            $("#slide6").fadeIn(1000, function () {
                                $("#slide7").fadeIn(1000, function () {
                                    $("#slide8").fadeIn(1000, function () {
                                        $("#slide9").fadeIn(1000, function () {
                                            $("div").delay(2000).fadeOut(1000, animate); // Call animate again
                                        });
                                    });
                                });
                            });
                        });
                    });
                });
            });
        });

    }()); // Call the animate function
});

我将您的代码包装在 Animate 函数中，该函数在最后一步之后再次调用。

PS。是的，您忘记在 JSFiddle 中启用 JQuery，但我认为这不是您的问题或与您的问题有关。

score 0 · Accepted Answer

将您的主要动画逻辑包装在一个函数中（您已经完成了）。像这样：

function Animate() {
   //your animation logic
}

然后定期调用相同的函数。像这样：

setInterval(function(){
   Animate()
}, 1000);

但是，你肯定需要改进你的主要逻辑和结构。

score 0 · Accepted Answer

这个问题我已经回答过一次了。重复：jQuery 循环命令
查看对问题的编辑，您会看到我现在已经回答了两次。

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

score 0 · Accepted Answer

If you want a nice way of queueing up animations, you can make an animation queue array containing objects with instructions, something like this:

var animationQueueArr = [
    {
        selector: '#slide1',
        delay: 4000,
        animation: 'fadeIn',
        duration: 2000,
        callback: true
    },
    {
        selector: '#slide1',
        animation: 'fadeOut',
        duration: 2000,
        callback: false
    },
    {
        selector: '#slide2',
        delay: 6000,
        animation: 'fadeIn',
        duration: 2000,
        callback: true
    }
    // and so on
];

Then, you can loop over them:

function animate (i, skipDelayBool) {
    skipDelayBool = skipDelayBool || false;
    var animationObj = animationQueueArr[i];
    if (animationObj.delay && false === skipDelayBool) {
        return setTimeout(function () {
            animate(i, true);
        }, animationObj.delay);
    }
    if (false === animationObj.callback) {
        $(animationObj.selector)[animationObj.animation](animationObj.duration);
        i += 1;
        i %= animationQueueArr.length;  // reset back to 0 if necessary to start new loop
        animate(i);
    } else {
        $(animationObj.selector)[animationObj.animation](animationObj.duration,
        function () {
            i += 1;
            i %= animationQueueArr.length;
            animate(i);
        );
    }
}


animate(0);

Note I havent tested this, but it will send you on the right path and away from your worst indentation nightmares.

score 0 · Accepted Answer

尝试这个

JS代码

$(document).ready(function () {
    setInterval(intervalTest, 1000);
});

function intervalTest() {
    $("#slide1").fadeIn(2000, function () {
        $("#slide1").delay(4000).fadeOut(2000);
        $("#slide2").delay(6000).fadeIn(1000, function () {
            $("#slide3").fadeIn(1000, function () {
                $("#slide4").fadeIn(1000, function () {
                    $("#slide5").fadeIn(1000, function () {
                        $("#slide6").fadeIn(1000, function () {
                            $("#slide7").fadeIn(1000, function () {
                                $("#slide8").fadeIn(1000, function () {
                                    $("#slide9").fadeIn(1000, function () {
                                        $("div").delay(2000).fadeOut(1000, function () {});
                                    });
                                });
                            });
                        });

javascript - jQuery循环动画从头开始

5 回答 5

Related

Reference