Запустить анимацию одного элемента до завершения анимации другого элемента с помощью 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);

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

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

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

$("#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 вместо метода animate.)