サイズエフェクトを使用した後、要素の復元をアニメーション化するにはどうすればよいですか？

Question

サイズエフェクトを使用して要素の高さを100から80ピクセルに減らしています。後で、要素を元の状態に戻してアニメーション化したいのですが、サイズエフェクトを使用すると、やはりcssスタイルが多少ずれてしまいます（これは期待しています）。

この要素の復元を正しくアニメーション化するにはどうすればよいですか？

つまり

、私がない場合：

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

どのように私は戻って正確には、事前にサイズを変更状態だと$("my_element")をアニメーションのですか？

私が考えている方法は面倒で、サイズ効果の内部実装に非常に依存しています。

EDIT：

はこれを行うには十分ではありません。

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

それが要素に上タック他の多くのスタイルを残して。

Answer 1

要素の.clone（）コピーを保存してから、エフェクトのcompleteイベントが発生したときに、DOMの要素をエフェクトの前にコピーしたものに置き換えます。

Answer 2

データエレメントはここにあなたの友人です。あなたがプロパティの多くを変更しているので、私は」

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

（あなたのコメントをもとに編集） ：

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

次にあなたが戻ってする必要があります。ただ、そのような初期値を設定しますこの経路を示唆します。私はそれが最良の解決策であるかどうかわかりませんが、うまくいくでしょう。

アニメーション化する要素の状態を格納するグローバルオブジェクトを作成します。

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