Запустите анимацию одного элемента перед анимацией другого элемента, используя JQuery

Question

У меня есть несколько div, которые я хочу оживить с помощью jQuery. Тем не менее, я хочу начать анимацию следующего div, когда анимация предыдущего div находится на полпути. Пожалуйста, помогите, как получить желаемый эффект. У меня есть следующий код, но он не работает:

$("#box1").animate({opacity:0},{ duration: 800 }).delay(400).animate({opacity:1},{duration: 800 }); 
    $("#box2").animate({opacity:0},{ duration: 800 }).delay(400).animate({opacity:1},{duration: 800 }); 
    $("#box3").animate({opacity:0},{ duration: 800 }).delay(400).animate({opacity:1},{duration: 800 }); 
    $("#box4").animate({opacity:0},{ duration: 800 }).delay(400).animate({opacity:1},{duration: 800 }); 

Answer 1

Вы можете добавить задержку на второй DIV:

$('div#first_div').animate({...}, 1000); 
$('div#second_div').delay(500).animate({...}, 1000); 

Edit: Я вижу, что вы добавили код на свой вопрос, но я я не уверен, когда именно вы хотите, чтобы следующий div начал.

Важным моментом является то, что каждая из четырех линий начинается в одно и то же время, поэтому вы получите желаемый результат, добавив задержку incresing в начале каждой строки.

В этом коде, например, коробки начнут постепенно исчезать, когда предыдущая коробка находится в середине выведения:

$("#box1").fadeOut(800).delay(400).fadeIn(800); 
$("#box2").delay(400).fadeOut(800).delay(400).fadeIn(800); 
$("#box3").delay(800).fadeOut(800).delay(400).fadeIn(800); 
$("#box4").delay(1200).fadeOut(800).delay(400).fadeIn(800); 

(Также обратите внимание, что вы в простой анимации можно использовать FadeIn/FADEOUT вместо метода анимирования.)