如何使用jQuery将动画设置回默认值

我使用jQuery应用元素级内联样式，它将覆盖底层css类样式定义

到目前为止一切都很好，但我想取消这项操作，并将动画设置回CSS规则定义的属性，删除元素的内联样式

一种解决方案是存储替换的值，然后将其动画化但是，这假定默认状态没有更改。如果有呢？

例如：

   <style>
       #foo { width: 100px;overflow:hidden; }
       @media all and (min-width:600px) {
           #foo { width: 200px; }
       }
   </style>
   <div id='#foo'>bar</div>

   <script>
   // at some point use clicks a toggle
   jQuery('#foo').animate({width:0});
   // now user resizes window, triggering change in (overridden) CSS style
   // ...
   // at some later point user clicks toggle again
   jQuery('#foo').animate( **something to remove inline style** );
   </script>

鉴于上述情况，如何使用jQuery查找由其类为foo定义的50%宽度，而忽略覆盖的样式属性？

有趣的问题

似乎没有办法回滚通过jquery应用的更改。但是，在将更改应用于元素的样式属性时，您可能能够解决此问题

$('foo').removeAttr('style');

看到小提琴在-

---

但是，请注意，这当然会删除样式属性中定义的任何其他css。

我能想到的唯一方法是使用数据属性“记住”宽度

<div class='c' style='width:10%' data-desktop-width="500" data-tablet-width="200">foo</div>

foo

这样，您可以检查浏览器宽度，并从“数据”属性中获取正确的宽度。然而，这并不理想，因为您将不得不定义大量额外的标记，如果您需要在许多元素上执行这种行为，这将非常麻烦

我个人想不出比这更好的方法了。如果您不需要设置动画就可以生存，这将更容易，因为您可以一起删除“样式”属性以重置内联样式

编辑：另一种方法可能是将容器动画设置为0，当需要重新设置动画时，可以获得相关元素的宽度，然后将容器动画设置为该宽度。这意味着您需要在每个要设置动画的元素上添加一个额外的容器

---

由于卡米的关键成分：

这似乎对我有用

复制样式属性

取消设置样式属性

使用jQuery获取所需的任何指标（例如宽度）

重新设置样式属性

根据步骤（3）中获得的值设置动画

最后，使用

complete

回调来取消设置样式，这些样式在我们将动画设置回正确的普通CSS位置后不再需要

看起来步骤2-4发生得太快了，浏览器根本不需要渲染。（至少我的没有）

e、 g

---

首先单击“变宽”按钮。该栏将设置更大的动画。然后，您可以单击“默认”将动画设置回原始状态，或单击“切换状态”，然后单击“默认”，它将动画设置回第二个状态。最后，所有内联样式都将被删除，因此“切换状态”将正常地来回跳转。

为什么默认状态会更改？您是指重新调整窗口大小吗？@F4r-20是的，没错。您可以在每次更改窗口时进行检查。@F4r-20是的，我可以在每次调整窗口大小时触发一个事件，将媒体查询编程为js，但它仍然留下同样的问题：当应用样式覆盖时，如何获取已被覆盖的属性？这将删除所有内联样式，但不会设置动画哦，谢谢，这给了我一个想法…（去测试…）

<div class='c' style='width:10%' data-desktop-width="500" data-tablet-width="200">foo</div>