jQuery的動畫步驟

Question

我有一個演示代碼工作中格將移動到右側爲一個特定的位置之後，它會去底 手段

DIV started moving------------------>  
            . Div turn to bottom   
            . 
            . 
            . 
            . 
            . 
            V 
         Div's place after move and turn 

爲了使這一類型的動畫我應該閱讀和使用哪些代碼。我已經瞭解了兩種代碼格式。 我正在粘貼兩個代碼進行demostation。

如何來解決這個問題：

1. $('span').animate({ 
     // Properties of the elements to animate 
     opacity: 0.25, 
     left: '+=50' 
    }, 
    { 
     // step is a callback for each step of the animation 
     step: function(now, fx) { 
      // do stuff... 
     } 
    }); 


    2. $.when($('#foo').animate({ 
      top: 100, 
      left: 100 
     }, 3000)).pipe(function() { 
      return this.animate({ 
       top: 0, 
       left: 0 
      }, 3000); 
     }).then(function() { 
      console.log('done'); 
     }); 

Answer 1

有沒有必要做任何這裏推遲。我們有回調函數在完成之後執行，所以我們不需要捕獲when/then/pipe延遲方法。

$('span').animate({ 
    top: 100, 
    left: 100 
}, 3000, function(){ 
    $('span').animate({ 
     top: 0, 
     left: 0 
    }, 3000, function(){ 
     console.log('done') 
    }); 
}); 

Here's the jsFiddle