Question

I’m using the size effect to decrease my element’s height from 100 to 80px. Later I want to animate the element back to its original state, however, using the size effect again results in many slight off css styles (which is expected).

How do I animate the restoration of this element’s correctly?

In other words, if I do:

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

how do I animate $("my_element") back to exactly it’s pre-resize state?

The methods I’m coming up with are messy and very dependent on the internal implementation of the size effect.

EDIT:

doing this is not good enough:

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

as it leaves many other styles tacked on to the element.

Answer 1

You could store a .clone()’d copy of the element, then when your effect’s complete event is fired, replace the element on the DOM with the copy you made prior to any effects.