使用jQuery为具有已定义为“！important”的属性的对象设置动画。 [英] Using jQuery to animate an object with properties already defined as "!important"

问题描述

我使用jQuery .show（）来动画添加额外的DOM元素到页面，当每个添加时，我想下面的元素以同样的方式优雅地滑下来。

I'm using jQuery .show() to animate adding extra DOM elements to a page, and when each is added, I would like the elements below to gracefully slide down in the same way.

不幸的是，其他元素的位置用CSS ！important 标志定义，这意味着它们不能通过滑动动画而没有动画本身在每个动画步骤设置！important 标志。有没有办法这样做？

Unfortunately, the other elements have their positions defined with CSS !important flags, meaning they cannot be moved by the sliding animation without the animation itself also setting the !important flag at every animation step. Is there any way of doing this?

不幸的是，在技术上完全不可能修改源HTML或链接的CSS样式。

Unfortunately, it is completely technically impossible for me to modify the source HTML or linked CSS styles.

推荐答案

即使你的div有一个被定义为！important的样式，那个div的孩子应该仍然能够覆盖那个样式。鉴于此，如果你先添加一个新的元素（使用jQuery）然后应用样式到那个新的元素呢？像这样：

Even though your div has a style that is defined as !important, children of that div should still be able to override that style. In light of this, what if you add a new element (using jQuery) first and then apply the styles to that new element instead? Like so:

$("#something").wrapInner("<span class='test' />").children(".test").animate({
    fontSize: "3em"
  }, 1500 );

这样你不必修改原来的HTML / CSS或jQuery框架本身，

This way you do not have to modify the original HTML/CSS or the jQuery framework itself and in most cases you can still achieve the desired effect.

示例jsFiddle： http://jsfiddle.net/rVzhf/4/

Example jsFiddle: http://jsfiddle.net/rVzhf/4/

这篇关于使用jQuery为具有已定义为“！important”的属性的对象设置动画。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！