Изображения трансформируются одно в другое. Я хочу, чтобы эта функция повторялась бесконечно:
$(document).ready(function () {
$(".cup2").fadeOut(15000);
$(".cup1").animate({
opacity: '1'
}, 15000);
$(".cup1").delay(5000).fadeOut(10000);
$(".cup4").delay(15000).animate({
opacity: '1'
}, 15000);
$(".cup4").delay(5000).fadeOut(6000);
$(".cup5").delay(30000).animate({
opacity: '1'
}, 15000);
$(".cup5").delay(5000).fadeOut(6000);
$(".cup6").delay(45000).animate({
opacity: '1'
}, 15000);
$(".cup6").delay(8000).fadeOut(5000);
$(".cup7").delay(55000).animate({
opacity: '1'
}, 15000);
});
Прежде всего, вместо того, чтобы запускать все анимации сразу, но с задержкой, вы можете позволить одной анимации следовать за другой, предоставив обратный вызов, который вызывается после завершения анимации. Это также упростит запуск «следующего» и повторного запуска первого, если следующего нет.
try this to iterate
function fader() {
setInterval(function(){
$(".cup2").fadeToggle(400);
}, 1000);
}
setTimeout(fader, 5000);
так как мне добавить к этому другие изображения ??
use promise rather then delay
$(document).ready(function(){
function loop(){
$(".cup2").fadeOut(4000,function(){
$(".cup1").animate({opacity:'1'},4000).promise().then(function() { $(".cup1").fadeOut(10000);
$(".cup4").animate({opacity:'1'},4000).promise().then(function() { $(".cup4").fadeOut(10000);
$(".cup5").animate({opacity:'1'},4000).promise().then(function() { $(".cup5").fadeOut(10000);
$(".cup6").animate({opacity:'1'},4000).promise().then(function() { $(".cup6").fadeOut(10000);
$(".cup7").animate({opacity:'1'},4000).promise().then(function() { $(".cup7").fadeOut(10000);
$(".cup2").animate({opacity:'1'},4000).promise().then(function() { loop(); });
});
});
});
});
});
});
}
loop();
});
Измените название вопроса.