Create Smooth Animation Using jQuery’s
Create Smooth Animation Using jQuery stop animate() method is a quick way to create custom animation on an element. To do that, we provide a set of CSS style properties and values that those properties will reach at the end of the animation. You can also set up a sequence of animations that executes one after the other. This is called chaining animation in jQuery.
JQuery Stop in Action
To give you an idea, first, see this sample code. Try to quickly move the mouse on the list items to notice the lag. The problem here is that more and more animation is added to the queue, which results in lag. To fix this problem, we need to use the jQuery stop() method.
- queue – A string value indicates the queue name. This is not needed for simple examples.
- clearQueue – An optional boolean indicating whether to clear the current animation queue. The default value is false.
- jumpToEnd – An optional boolean indicating whether to complete the current animation immediately. The default value is false.
3 Ways to Play
creating smooth animation and resolve issues related to the animation query the stop() method can be used in 3 ways:
- stop() – This version stops the currently running animation.
- stop(true, false) – This will clear the animation queue so they don’t pile up, but will not force jQuery to jump to the end of the queue.
- stop(true, true) – This will clear the animation queue and also force a jump to the end of the queue and execute the last initiated animation.