使用尺寸效果后，如何设置元素的恢复动画？

Question

我正在使用尺寸效果将元素的高度从100降低到80px。后来我想将元素动画回原始状态，但是，再次使用大小效果会导致许多轻微的css样式（这是预期的）。

如何正确恢复此元素的恢复？

换句话说，如果我这样做：

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

我如何动画 $("my_element")回到它的预调整大小状态？

我想出的方法很混乱，并且非常依赖于尺寸效应的内部实现。

修改

这样做不够好：

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

因为它会在元素上添加许多其他样式。

Answer 1

数据元素是你的朋友。只需像这样设置初始值：

$('#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" } });

Answer 2

您可以存储元素的.clone（）副本，然后在触发效果的完整事件时，将DOM上的元素替换为您在任何效果之前创建的副本。