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.
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
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.
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.
J Query Related Interview Questions
|HTML 4 Interview Questions||HTML Interview Questions|
|HTML 5 Interview Questions||Zend Interview Questions|
|JqueryUI Interview Questions||Dynamic HTML Interview Questions|
|XQuery Interview Questions||jQuery Mobile Interview Questions|
J Query Related Practice Tests
|HTML 4 Practice Tests||HTML Practice Tests|
|HTML 5 Practice Tests||Zend Practice Tests|
|PHP and Jquery Practice Tests||J Query Practice Tests|
|CodeIgniter Practice Tests||Dynamic HTML Practice Tests|
J Query Tutorial
Selecting Elements With Jquery
Beyond The Basics
Faster, Simpler, More Fun
Html Form Enhancements From Scratch
Html Form Enhancements With Plugins
Interface Components From Scratch
User Interfaces With Jquery Ui
Jquery Ui Theming
Jquery, Ajax, Data Formats: Html, Xml, Json, Jsonp
Using Jquery In Large Projects
All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd
Wisdomjobs.com is one of the best job search sites in India.