Das Erstellen von jQuery-Animationen in der Warteschlange

Question

Ich versuche, einige Animationen auf Divs mit Warteschlange zu machen, aber ich fühle mich irgendwie dumm, weil ich es nicht beherrschen kann... Ich habe es geschafft, Animationen auf EINEM Div in der Warteschlange zu haben, aber ich möchte, dass es auf mehreren Divs gemacht wird.

Problem: Nach dem Klicken auf div3->

Div1 sollte transparent werden (0.5)

nachdem es abgeschlossen ist

Div2 sollte sich nach rechts bewegen +50px;

nachdem es abgeschlossen ist

Div1 sollte nach oben um +50px bewegt werden

nachdem es abgeschlossen ist

Div2 sollte transparent werden (0.5)

Ich habe den folgenden Code, aber er funktioniert nicht wie erwartet.

    $("#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(); 
                  });           

                          });

Kann mir jemand hier helfen? Vielen Dank im Voraus

Answer 1

Sie können es mit dem folgenden Code versuchen

$("#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});
            });
        });
    });
});