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

Question

I'm trying to move some elements on the page, and during the time the animation occurs, I want to have "overflow:hidden" applied to an elemnt, and "overflow" back to "auto" once the animation is completed.

I know jQuery has an utility function that determines whether some element is being animated but I can't find it anywhere in the docs

score 203 · Accepted Answer · edited Nov 14 '19 at 16:45

203

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

edited Nov 14 '19 at 16:45

Studocwho

2,404
3
23
29

answered Apr 07 '09 at 11:49

James

109,676
31
162
175

yes that was it, thanks. how could I miss it? damn, I'm getting old – Apr 07 '09 at 13:19
FYI, if you don't want to risk overwriting your CSS styles by programming "overflow: auto" in the callback, simply use `.css('overflow', '')`. Passing an empty string generally removes that property from the element's style altogether. Not sure if this is documented behavior, but it's a very useful trick. – Ward D.S. Apr 29 '16 at 08:38
2

I don't think it supports CSS animations. – Gqqnbig Jan 21 '17 at 02:28

score 5 · Answer 2 · edited Aug 24 '15 at 11:07

5

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

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

edited Aug 24 '15 at 11:07

Bill

3,478
23
42

answered Jan 15 '14 at 10:29

Tim

123
2
5

This is very not true... The opposite of jquery 'is' is not 'not'. 'not' removes filtered elements from the jquery object. If you want to check for not animated object you do `if (!$(element).is(':animated')) {...}` – amosmos Jul 22 '15 at 12:16
1

@amosmos The answer was edited and community approved.. I have rolled it back to where it was correct. – Bill Aug 24 '15 at 11:08
@amosmos stop trolling – Eric Cicero May 11 '17 at 16:25

score 2 · Answer 3 · answered Jun 22 '15 at 22:20

2

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

answered Jun 22 '15 at 22:20

Ari

4,643
5
36
52

OP is using jQuery animaiton. – Michał Perłakowski Dec 27 '15 at 14:59
just suggesting an alternative. And did you meant animation? – Ari Dec 27 '15 at 15:10
Yes, I meant animation. IMO your answer is completely off-topic. – Michał Perłakowski Dec 27 '15 at 15:11

score 0 · Answer 4 · answered Aug 25 '16 at 08:23

If you want to apply css to animated elements, you can use the :animated pseudo selector and do it like this,

$("selector").css('overflow','hidden');
$("selector:animated").css('overflow','auto');

source : https://learn.jquery.com/using-jquery-core/selecting-elements/

score 0 · Answer 5 · edited Jun 26 '17 at 13:30

0

$('selector').click(function() {
  if ($(':animated').length) {
    return false;
  }

  $("html, body").scrollTop(0);
});

edited Jun 26 '17 at 13:30

Erazihel

7,295
6
30
53

answered Jun 26 '17 at 06:58

anand vishwakarma

69
1
7

While this code may answer the question, providing additional context regarding how and/or why it solves the problem would improve the answer's long-term value. Please read this [how-to-answer](http://stackoverflow.com/help/how-to-answer) for providing quality answer. – thewaywewere Jun 26 '17 at 07:19

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

5 Answers5

Linked

Related