Как добавить задержку к этому ротатору изображений?

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