使用jQuery管理複雜的動畫

我需要在我的網站上完成相當複雜的動畫，元素上下滑動，CSS屬性被操縱等等。我想知道如何以優雅的方式做到這一點。使用jQuery管理複雜的動畫

動作觸發onclick，另一次點擊應該恢復一切，直到網站再次處於其原始狀態。

我不想做的就是寫這樣

功能

$(somebutton).onclick(function() { 
     if($(this).hasClass("clicked") { 
      $(this).slideDown(); 
      $('#that').show(); 
      $('#button').css("position","absolute"); 
      // more things going on 
      } else { 
      // revert all things gone on 
      $(this).slideUp(); 
      $('#that').hide(); 
      $('#button').css("position","static"); 
      }

}）;

這意味着我不想將所有這些語句寫出兩次，甚至更糟糕的是，大多數動畫在70％中都是相同的。我不想一遍又一遍地寫這些。

我想到的就像是一個動畫隊列，我可以操縱，彈出和移動，最重要的還原。我發現jQuery的隊列（） - 功能，但有一點我卡住：

一旦定製隊列離隊它不存在任何更多，這意味着我可以一次動畫的元素，但我可以例如，說：

myQueue.queue（'animate'）。reverse（）;

myQueue被觸發後，因爲此時它是空的。

這個冗長的解釋不僅僅是針對這個簡單的隊列問題。這也是一個邀請建議更好的方法來實現這一點。

來源

2011-08-05 Chrisissorry

我會去面向對象的方法。看看這篇博文：http://ryanflorence.com/authoring-jquery-plugins-with-object-oriented-javascript/ –

我不認爲有一個開箱即用的解決方案。動畫並不知道它們的反轉操作，因此恢復它們是一件不平凡的任務。也就是說，自己寫這樣一個系統不應該都很複雜。畢竟每個動畫都非常簡單，倒序操作應該很容易生成。

來源

2011-08-05 11:09:35

使用jQuery管理複雜的動畫

回答

相關問題