how to use !important in jQuery animate() function

Question

Please see the jQuery below:

I am really wondering how can I use CSS !important for height in this code.

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

The CSS of #lveis-wrapper_3 is below :

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

I can not remove !important from height: 936px for some reasons...
so I want to change that height by animate() jQuery function - but how?

Answer 1

You just cannot do this.

As per jQuery documentation...

"All animated properties should be animated to a single numeric value... ... most properties that are non-numeric cannot be animated using basic jQuery functionality..."

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

---

I strongly recommend re-examining your need for !important.

Answer 2

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

you use:

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