Question

我想在一张简单的图片上重复动画，我已经使用setinterval函数轻松完成了。但我也希望在页面加载后延迟重复5秒钟。

现在我有了这个：

setInterval(function(){
    $("#arrow").fadeToggle(400);
}, 1000);

我想像这样延迟动画，但它不起作用：

setTimeout(
     setInterval(function(){
        $("#arrow").fadeToggle(400);
     }, 1000);
, 5000);

有一种简单的方法吗？

Answer 1

你走在正确的轨道上。尝试将其转换为函数，然后延迟它。

function fader() {
    setInterval(function(){
       $("#arrow").fadeToggle(400);
    }, 1000);
}
setTimeout(fader, 5000);

Answer 2

我认为setTimeout很好但是你可以在完成时递归fadeToggle函数（递归）

function arrowFadeToggle(){
  $("#arrow").fadeToggle(1000,arrowFadeToggle);
}

setTimeout(arrowFadeToggle,5000);

Demo

Answer 3

请注意，setInterval可能最终导致您的动画不同步。特别是问题是setInterval无论动画是否结束都会触发。在这种情况下，这不是一个大问题，但如果你的延迟较小，这可能会成为一个问题。

更有效的方法是：

function animateFade() {
   $('#arrow').fadeToggle(400).delay(600).promise().done(animateFade);
}

// Put this in your document ready handler, handles your initial delay
setTimeout(animateFade, 5000);

只有在延迟动画结束后，animateFade函数才会调用自身。这可以保证您永远不会同时运行两个函数（并且您的动画永远不会失去同步）。

JSFiddle example

Answer 4

使用setInterval，它会自行延迟1秒（在您的情况下）。顺便说一下，如何使用两者：

setTimeout(function(){

setInterval(function () {
console.log("Hi There I'll wait 10 seconds to start first time")
                        }, 3000);

},7000)

jquery延迟和重复功能

4 个答案: