Question

I’m trying to prevent clicks on a list item while an animation is occurring. So at the top of my click handler, I want to do something like this:

if(!$(this).is(:animated)) {
    // handle click code here
}

Note the ‘bang’ (!) in the if statement above. I haven’t tested, but I assume this will work. What I’m not sure of is whether ‘.is(:animated)’ will return true when run against an element that is being animated via fadeIn() and fadeOut(). I know that jQuery has a .animate() function, and I assume :animated certainly works against elements animated using that function, but will it work with those using fadeIn() and fadeOut()? Thanks.

UPDATE: After some dramatic mis-posts, all seems well, and thanks to the reponders for all the great follow-ups and edits. In the end, I have found that, yes, :animated matches those elements animated using fadeIn() and fadeOut() because the jQuery source uses .animate() to achieve these effects. My final check was as originally posted:

if(!$(this).is(:animated)) {
    // handle click code here
}

..rather than using .not() as has been proposed in some instances (though I believe these will work as currently posted). Thanks again.

Answer 1

Yes, :animated will return true for any sort of animation that jQuery creates. It will also do it for any plugins that animate provided they use the jQuery animate function.

However, you can write your code just a pinch differently to make use of jQuery:

Edit The not function is not the opposite of is. It filters out nodes, but still returns a jQuery object which evaluates to true. To use the not function as I originally suggested, you would have to add .length to the test:

if( $(this).not(':animated').length ) {
    // Handle click code here
}

Otherwise, use the function as the OP originally posted:

if( !$(this).is(':animated')) {
    // Handle click code here
}