Question

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

到目前为止一切都很好，但后来我想取消它，并动画回到CSS规则定义的属性，删除元素的内联样式。

oft offered解决方案是存储您替换的值，然后再将其设置为动画。 但是，这假定默认状态未更改。该怎么办？

示例：

   <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>

在这个例子中，假设用户以一个小浏览器窗口开始。 #foo的大小为100px。他们点击切换按钮并将其设置为0。接下来，用户调整窗口大小，大小为> 600px，激活响应类样式，其中#foo为200px。 我如何告诉jQuery弄清楚它并为其制作动画？

简化示例

<style>
    .c { width: 50%; }
</style>
<div class='c' style='width:10%' >foo</div>

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

Answer 1

有趣的问题。

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

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

请参阅 - http://jsfiddle.net/bG2ty/1/的小提琴。

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

Answer 2

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

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

这样做可以检查浏览器宽度并从data属性中获取正确的宽度。但是这并不理想，因为你必须定义很多额外的标记，如果你需要很多元素的这种行为，那将是非常麻烦的

我个人想不出更好的方法来做到这一点。如果您可以在没有动画的情况下生活，那么您将更容易删除样式属性以重置内联样式。

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

http://jsfiddle.net/SS638/

Answer 3

对Kami的关键成分给予了大量信任：

这似乎适用于

复制样式属性。
取消设置样式属性。
使用jQuery获取所需的任何指标（例如宽度）
重新设置样式属性
对步骤（3）中获得的值进行动画处理。
最后，使用complete回调来取消设置一旦我们动画回到正确的纯CSS定位后不再需要的样式。

似乎步骤2-4的发生速度太快，以至于浏览器不会打扰渲染。（至少我没有）

e.g。 http://jsfiddle.net/EFGRs/

首先点击“Make wide”按钮。酒吧动画更大。然后，您可以单击“默认”以设置回原始状态，或单击“切换状态”然后“默认”，它将动画回到第二状态。最后，所有内联样式都被删除，因此“切换状态”将像往常一样来回跳转。

如何使用jQuery动画回默认值

简化示例

3 个答案: