Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I find out with jQuery if an element is being animated?

People also ask

Is animated jQuery?

Because :animated is a jQuery extension and not part of the CSS specification, queries using :animated cannot take advantage of the performance boost provided by the native DOM querySelectorAll() method.

Which method is available in jQuery for animation?

The animate() method performs a custom animation of a set of CSS properties. This method changes an element from one state to another with CSS styles. The CSS property value is changed gradually, to create an animated effect.

What is the correct syntax to call the jQuery animate () function?

The animate() is an inbuilt method in jQuery which is used to change the state of the element with CSS style. This method can also be used to change the CSS property to create the animated effect for the selected element. Syntax: (selector).

Which jQuery method kills the current animation being performed?

So, by default, the stop() method kills the current animation being performed on the selected element.


if( $(elem).is(':animated') ) {...}

More info: https://api.jquery.com/animated-selector/


Or:

$(elem)
    .css('overflow' ,'hidden')
    .animate({/*options*/}, function(){
        // Callback function
        $(this).css('overflow', 'auto');
    };

Alternatively, to test if something is not animated, you can simply add a "!":

if (!$(element).is(':animated')) {...}

if you are using css animation and assign the animation by using specific class name, then you can check it like this:

if($("#elem").hasClass("your_animation_class_name")) {}

But make sure that you are removing the class namewhich is handling the animation, after the animation is finished!

This code can be used to remove the class name after the animation is finished:

$("#elem").on('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend',
function(){ 
        $(this).removeClass("your_animation_class_name");
});