如何在使用大小效果后对元素进行动画恢复？

Question

我使用尺寸效应将我的元素的高度从100‘s降低到80’s。稍后，我想动画元素回到它的原始状态，然而，使用大小效果再次导致许多轻微的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" } });