在队列中制作jQuery动画

Question

i am trying to do some animations on divs with queue but i kind feel stupid since i cant master it... i made it to queue animations on ONE div but i want it to be done on several divs.

Problem: After clicking on div3->

Div1 should become transparent (0.5)

after its complete

Div2 should move right+50px;

after its complete

Div1 should move top +50px

after its complete

Div2 should become transparent (0.5)

I have the following code but it wont work as expected.

    $("#div3").click(function(){
                        $("#div1")
.queue(function(next) {
    $(this).animate({opacity: 0.5}, 
    {duration: 1000, queue: true});
    next();
})
.queue(function(next) {
                $("#div2").animate({right: "+=50"},
    {duration: 2000})
    next(); 

})

 .queue(function(next) {
                 $(this).animate({top: "+=50"},
    {duration: 2000})
    next(); 


})
  .queue(function(next) {
                 $("#div2").animate({opacity: 0.5}, 
    {duration:4000, queue: true});

    next(); 
                  });           

                          });

Can anyone help me out here? Thank you in advance

Answer 1

You can try with below code

$("#div3").click(function(){
   $("#div1").animate({opacity: 0.5},{duration: 1000}, function() {
        $("#div2").animate({right: "+=50"},{duration: 2000}, function(){
            $("#div1").animate({top: "+=50"},{duration: 2000}, function(){
                $("#div2").animate({opacity: 0.5}, {duration:4000});
            });
        });
    });
});