在隊列中製作jQuery動畫

Question

我正在嘗試在隊列上做一些動畫，但由於我不能掌握它，所以我覺得很愚蠢......我讓它在一個div上排隊動畫，但我希望它可以在幾個div的。

問題： 點擊後div3->

Div1構成應在其完整

Div2的後變得透明（0.5）

應該向右移動50像素+;

後的完整

Div1構成應後頂部移動+ 50像素

其完整的

Div2的應該成爲透明（0.5）

我有下面的代碼，但它不會達到預期效果。

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

          }); 

任何人都可以幫助我嗎？謝謝你在前進

Answer 1

你可以用下面的代碼

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