Using jQuery to animate an object with properties already defined as “!important”

问题

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.

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?

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

回答1:

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

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.

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

回答2:

Inline styles override !important, so use $(element).css('top','10px') or remove the class names from the elements that contain !important.

回答3:

I do think that by calling those attributes "!important" you just screwed yourself. Really.

!important attributes will go over anything that is not !important... Jquery adds styles as inline, the highest possible before !important; and I don't think you can ask jquery to add an important attribute.

Solution: Rework your CSS to not use the !important. Way to do it would be to abuse the score system. In short, the longer the selector, the more important it is, without using the !important tag. !important is for exceptions.

Another way, and I'm not sure this will work, is to put your !important css as inline. It should get remplaced by whatever value Jquery puts in.

来源：https://stackoverflow.com/questions/8300617/using-jquery-to-animate-an-object-with-properties-already-defined-as-important