如何實現jQuery幻燈片/反彈動畫？

Question

基本上我想有一個DIV滑出，並做一個輕微的反彈，它通過它的最終大小，然後返回。不知道如何解釋它，請參閱我在下面的圖嘗試：

---------------------> //Slides out 
       <---- //Then "bounces" back to it's final size 

我的第一部分向下使用切換動畫：

$("#second").animate({ width: 'toggle' }, 85); 

我想我能得到通過的反彈效應做：

$("#second").animate({ width: 'toggle' }, 85).animate({ width: 'toggle' }, 75); 

但它消失。讀過animate/toggle文檔後，我想這是有道理的，但我仍然不確定如何獲得所需的功能。有什麼建議麼？

獎勵分數，如果您可以使滑動div的內容被切斷而不是被推到下一行。

Answer 1

我能夠實現這樣說：

$("#second").animate({ width: 'toggle' }, 250).animate({ width: '-=10' },185); 

似乎是最直接的方式。

Answer 2

您需要添加一個complete處理程序。

Answer 3

我所知道的最簡單的方法是使用jQuery Easinh Plugin（http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js）並使用「easeOutBack」方法。

$("#second").animate({ width: 'toggle' }, 85, "easeOutBack");