Анимация в JQuery, шаг за шагом выполнение

Question

Я использую следующий код для анимации в JQuery. Я хочу, чтобы step2 выполнялся, когда step1 выполняется полностью. На данный момент оба шага работают одновременно, поэтому я получаю фоновое изображение как image2.jpg, а изображение1.jpg - в стиле css. ПОМОГИ ПОЖАЛУЙСТА? Я новичок в JQuery

шаг: 1

$("#atn").animate({top:"+=335"},3000).animate({top:"-50px"},1000).animate({top:"0"},2000).animate({width:"hide"},0); 

шаг: 2

$("#atn").css("background-image", "url(images/image2.jpg)"); 

* Примечание: Шаг два могут быть разными div например. #atn2

Answer 1

Использовать обратный вызов animate.

$("#atn").animate({top:"+=335"},3000).animate({top:"-50px"},1000).animate({top:"0"},2000) 
     .animate({width:"hide"},0, function(){ 
      $("#atn2").css("background-image", "url(images/image2.jpg)"); 
     });