jquery - 如何在此图像旋转器中添加延迟？

Question

在继续淡出动画之前，希望旋转器在图像上保持 4 秒。我已经尝试将 .delay 输入到许多位置，但我就是不知道它会去哪里。只知道一点jquery。

/* image rotator */
function changeImg(){
$('.photogallery').animate({opacity: 0}, 3000, function(){
$(this).css('background','url(' + preloadArr[currImg++%preloadArr.length].src +') ',);

}).animate({opacity: 1}, 3000);
}

});

Answer 1

如果您要使用当前使用的方法，则应.delay()在最初调用.animate(). 但是，这会假设您连续多次调用此方法。

$('.photogallery').delay(4000).animate({
    opacity: 0
}, 3000, function () {
    $(this).css('background', 'url(' + preloadArr[currImg++%preloadArr.length].src +')';
}).animate({
    opacity: 1
}, 3000);

演示

如果您希望该方法自触发下一次迭代，您可以changeImg在动画执行结束时递归调用。尽管这会旋转图像，但利用递归进行无限循环通常会在浏览器中产生问题。

$('.photogallery').delay(4000).animate({
    opacity: 0
}, 3000, function () {
    $(this).css('background', 'url(' + preloadArr[currImg++%preloadArr.length].src +')';
    colorIndex++;
}).animate({
    opacity: 1
}, 3000, changeImg);

演示

首选方法可能是用于window.setInterval设置浏览器调用该方法之间的时间长度。您将不得不使用时间，因为它不尊重方法中发生的动画延迟。为了轻松解决这个问题，我在安排 with 之前简单地调用了一次setInterval。

changeImg();
window.setInterval(changeImg, 4000);

演示