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);

<强> DEMO

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

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

<强> DEMO

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

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

<强> DEMO

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

1 个答案: