Determining Whether Elements Are Currently Being Animated - J Query

Problem
When an animation is in progress, we may want to prevent the user from triggering the animation to run again until the initial animation has finished.An example of this may be if the user clicks a button to trigger some animation. This could be to reveal some piece of information. For our particular contrived example, when the user clicks the button, we will shake the box back and forth.If the user keeps clicking the button, we won’t want to keep queuing animations, so we need to test whether the animation is already running and, if it is, ignore the request to animate.

Solution

For this solution, I want to include some debugging information, so I’ve included a <div>element with the ID of debug, and we’ll append log messages to this to help us see what’s happening.
We will use the :animated custom jQuery selector to test whether the animation is
running:

Discussion

In this contrived example, we use multiple calls to the animate method to make the box shake back and forth (though if this were required in reality, it might be better to use a bouncing easing instead!).
This animation is triggered when the user clicks the animate button.
I have included two callback functions to show when the animation starts and finishes.Note that even though there are several lines, because of the way chaining works, this is in fact one single line of JavaScript starting from $('.box') and ending on });// end of our long chain.
The following line of jQuery filters out any div.box element that is currently being animated from our collection and only running the subsequent animations on the remaining elements:

Since we have a single div.box element in our example, the animation will run only if the element isn’t animating already.


All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

J Query Topics