how to use !important in jQuery animate() function

问题

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?

回答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.

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

回答3:

I've used something like this:

const selected = $$(yourSelector);

selected .animate({
    height: height,
    width: width
}, {
    duration: 500,
    easing: 'swing',
    queue: false,
    step: (now, fx) => {
        selected[0].style.setProperty(fx.prop, `${fx.now}${fx.unit}`, 'important');
    },
    complete: () => {
        selected[0].style.setProperty('width', `${width}px`, 'important');
        selected[0].style.setProperty('height', `${height}px`, 'important');
    }
});

回答4:

You can't do that, but try this!

Depending on whether it is a DIV, IMG,... you will have to do something like this. This example is in the case of an image:

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

Priorities are defined in CSS with the selector specificity. Your selector specificity for #id was 1.0.0, but adding img#id now is 1.0.1, therefore the priority is higher.

来源：https://stackoverflow.com/questions/9931122/how-to-use-important-in-jquery-animate-function