How to use! important in jQuery animate () function

Question

See jQuery below:

I'm really curious how I can use CSS !important for height in this code.

  $j('#lveis-wrapper_3').animate({ opacity: 0.0, height : 200 }, 1200); 

CSS #lveis-wrapper_3 below:

 #lveis-wrapper_3 { width: 844px !important; height: 936px !important; margin: 0pt 0pt 10px !important; padding: 0pt !important; float: none; } 

I cannot remove !important from height: 936px for some reason ...
so I want to change this height function to animate() jQuery function, but how?

Answer 1

You just can't do it.

According to jQuery documentation ...

"All animated properties must be animated using a single numeric value ...... most properties that are not numeric cannot be animated using the basic jQuery functions ..."

http://api.jquery.com/animate/

---

I highly recommend revising your need for !important .

Answer 2

You can use the css transition to make it work, because the css transition will work even if the style attribute is changed to $ (elem) .attr ('style', '...');

you're using:

Js

 // the element you want to animate $(elem).attr('style', 'your_style_with_important'); 

CSS

 elem { transition: all 0.2 linear; -moz-transition: all 0.2 linear; -webkit-transition: all 0.2 linear; } 

Answer 3

You cannot do this, but try it!

Depending on whether it is a DIV, IMG, ... you will need to do something like this. This example applies to the image:

  $j('img#lveis-wrapper_3').animate({ opacity: 0.0, height : 200 }, 1200); 

Priorities are defined in CSS with selector specificity. The selector specificity for #id was 1.0.0 , but the addition of img # id is now 1.0.1 , so the priority is higher.