Unset css animation property with jQuery.css method

Question

I know that CSS3 animation property is removed by setting to none !important, and so I tried (and did, within CSS code). But, by using jQuery.css() method to change animation property to mentioned, it doesn't work.

I have tried

$('#site-title, #site-description').css(
    {
        'animation':'none !important',
        '-webkit-animation':'none !important',
        '-moz-animation':'none !important',
        '-o-animation':'none !important'
    }

);

and also tried (knowing that jQuery in many cases handles prefixes automatically )

$('#site-title, #site-description').css(
    {
        'animation':'none !important'

    }

);

...no good. Just to note, I haven't mess node selection, when I for test purposes inser display:none they're gone.

How to resolve this?

isn't that `$('#site-title, #site-description').css('animation','none !important');` Not sure if the `.css` prototype works with objects.. http://api.jquery.com/css/ (despite using a class is slightly easier there) — briosheje, May 12 '15 at 10:41
you could try removeClass. This will remove your animation when you dont want it then addClass when you do want it — Andrew, May 12 '15 at 10:42

Fabrizio Calderan · Answer 1 · 2015-05-12T10:46:13.850

1

try using a CSS class (note: !important could not be necessary anymore)

.removeanimation {
    -webkit-animation:none !important;
    -moz-animation:none !important;
    -o-animation: none !important;
    animation:none !important;
}

then add the class to your elements

$('#site-title, #site-description').addClass('removeanimation');

edited May 12 '15 at 10:46

answered May 12 '15 at 10:41

Fabrizio Calderan

120,726
26
164
177

Logic-wise I think it'd be better the other way around - have a class which adds the animation, then remove that class. This way you're not having to set everything back to `none` and, more importantly, you can drop the `!important` altogether. – James Donnelly May 12 '15 at 10:43
yes, I left the `!important` only because I don't know how much specific is the rule that is activating the animation and I learnt to never make assumptions ;) but I agree that probably is not necessary (so I've edited the answer) – Fabrizio Calderan May 12 '15 at 10:45
This answer is correct, however I have to accept sasi's answer because it is pointing exactly to the strange quirk with jQuery, and reveals how to do it with .css method. Upvote for you, of course. – Miloš Đakonović May 12 '15 at 10:47
@Miloshio fair, just remember that it's always good to keep off css from javascript for less redundancy, better separation of layers and better mantainability of code so, in the end, whatever answer you accept I strongly suggest this approach – Fabrizio Calderan May 12 '15 at 10:48

score 1 · Accepted Answer · edited May 23 '17 at 11:58

1

You have to set like this:

function stopAnimation()
{
    $('#site-title, #site-description').css("-webkit-animation", "none");
    $('#site-title, #site-description').css("-moz-animation", "none");
    $('#site-title, #site-description').css("-ms-animation", "none");
    $('#site-title, #site-description').css("animation", "none");
}

Reference

edited May 23 '17 at 11:58

Community

1
1

answered May 12 '15 at 10:41

sasi

512
4
27

score 0 · Answer 3 · edited May 23 '17 at 11:51

0

For setting !important with jquery.css you should use this way:

$('#elem').css('cssText', 'animation: none !important');

Unset css animation property with jQuery.css method

3 Answers3