2

我正在使用 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>

在这个例子中，假设用户从一个小的浏览器窗口开始。的大小#foo为 100 像素。他们单击切换按钮，它的动画设置为 0。接下来，用户将窗口大小调整为 >600 像素，激活响应式类样式，该样式将具有#foo200 像素。我如何告诉 jQuery 解决这个问题并为其制作动画？

简化示例

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

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

4

3 回答 3

2

有趣的问题。

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

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

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

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

于 2013-07-15T13:28:24.220 回答
0

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

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

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

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

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

http://jsfiddle.net/SS638/

于 2013-07-15T13:59:11.380 回答
0

关键成分归功于 Kami：

它似乎有效

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

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

例如http://jsfiddle.net/EFGRs/

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

于 2013-07-15T14:52:59.903 回答