jQuery的延迟和重复功能

我想重复一个简单的图片上的动画，我已经用setinterval函数轻松完成了。但我也想在页面加载后延迟5秒的重复。jQuery的延迟和重复功能

现在我有这样的：

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

而且我想推迟这样的动画，但它不工作：

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

有没有一种简单的方法来做到这一点？

来源

2014-08-31 user3250328

你在正确的轨道上。尝试把它变成一个函数，然后拖延。

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

来源

2014-08-31 21:26:08

正是我想要的，谢谢！ – user3250328 2014-09-07 23:09:32

我认为setTimeout的是好的，但你可以有它拖延通过itselft一秒钟fadeToggle函数调用自身时完成（递归）

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

setTimeout(arrowFadeToggle,5000);

Demo

来源

2014-08-31 21:28:01 andrew

在使用setInterval（在你的情况）。通过这就是如何使用这两种方式：

setTimeout(function(){ 

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

},7000)

来源

2014-08-31 21:31:07

当心的是，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

来源

2014-08-31 21:56:55 martineno

jQuery的延迟和重复功能

回答

相关问题