Question

I am using following code to animate in Jquery. I want step2 to occur when step1 is completly executed. At the moment both steps run at same time hence i get background-image as image2.jpg, while image1.jpg is set at css style. HELP PLEASE? I am new to jquery

step:1

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

step:2

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

*NOTE: Step two might be different div eg. #atn2

Answer 1

Use the callback of 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)");
         });