如何在使用尺寸效果後對元素進行動畫修復？

Question

我使用尺寸效果將我元素的高度從100減小到80px。之後，我想將元素動畫化回原始狀態，但是，再次使用大小效果會導致很多輕微的CSS樣式（這是預期的）。

如何動畫這個元素的正確的恢復？

換句話說，如果我這樣做：

$("my_element").effect("size", { to: { height: "80px" } }); 

我怎麼動畫$("my_element")回正是它的預調整狀態？

我想出的方法是混亂和非常依賴於內部實現的規模效應。

編輯：

這樣做的不夠好：

$("my_element").effect("size", { to: { height: "100px" } }); 

，因爲它留下了許多其他風格的上漲上的元素。

Answer 1

你可以存儲.clone（）'d元素的副本，那麼當你的效果的完整事件被觸發，更換與您之前的任何影響提出副本的DOM元素。

Answer 2

數據 - 元素在這裏你的朋友。只需設置初始值，像這樣：

$('#my_element').data('height', $('#my_element').height()).effect("size", { to: { height: "80px" } }); 

然後，當你需要回去：

$('#my_element').effect("size", { to: { height: $('#my_element').data('height') +"px" } }); 

（編輯根據您的評論） 既然你改變很多的屬性，我我會建議這條路線。我不知道這是否是最好的解決方案，但它會起作用。

用於存儲要建立動畫的元素的狀態創建一個全局對象。

var elementState = {}; 

對於每個元素，你將動畫，存儲它的初始狀態。您可以使用元素的ID創建一種關聯數組（僅命名該對象的屬性）。

elementState['my_element'] = $('#my_element')[0].style; 

這將存儲對象的style屬性。 要獲取此信息當你想回去，你可以這樣做：

//put the height back to normal 
$('#my_element').effect("size", { to: { height: elementState['my_element'].height + "px" } });