稍微修改链接的示例,您可以使用$.delay将延迟引入动画:
这是最简单的形式,但确实在动画开始时引入了延迟:
演示
function loop() {
$('.bouncer').delay(1000)
.animate({'top': '500'}, 1000)
.delay(1000)
.animate({top: 0}, 1000, loop);
}
loop();
要消除该延迟,请将最后一个完成回调替换为 setTimeout 并消除初始延迟:
演示
function loop() {
$('.bouncer').animate({'top': '500'}, 1000)
.delay(1000)
.animate({top: 0}, 1000, function() {
setTimeout(loop, 1000);
});
}
loop();
修改为使用此样式的函数如下所示:
var polenteAnim = function() {
$("#polente").removeClass('flip')
.animate({"right": "+="+viewport}, tempoPolente, 'linear')
.delay(1000)
.addClass("flip")
.animate({"right": "-="+viewport}, tempoPolente, 'linear', function() {
setTimeout(polenteAnim, 1000);
});
};
如果您希望保持动画功能不变,您可以在内部动画完成后再次调用入口点:
var polenteAnim = function() {
$("#polente").removeClass('flip').animate({"right": "+="+viewport}, tempoPolente, 'linear',
function() {
setTimeout(function() {
// Add polente as the completion callback here...
$("#polente").addClass("flip").animate({"right": "-=" + viewport}, tempoPolente, 'linear', function () {
setTimeout(polenteAnim, 1000);
});
}, 1000);
});
};