www.pickatutorial.com Computer Tutorials
Top eBooks: C/C++ | C# | Android | Mathematics | Database | Cloud | Graphics | Networking | Oracle | Hardware | AI
Top Tutorials: C/C++ | C#.NET | PHP MySQL | Java | Java Script | jQuery | HTML | xHTML | HTML5 | VB Script| CSS
Lessons jQuery Controlling Animations using stop() Method Bookmark and Share
Tutorial Home
Lesson 1
Lesson 2
Lesson 3
Lesson 4
Lesson 5
Lesson 6
Lesson 7
Lesson 8
Lesson 9
Lesson 10
Lesson 11
Lesson 12
Lesson 13
Lesson 14
Lesson 15
Lesson 16
Lesson 17
Lesson 18
Lesson 19
Lesson 20
Lesson 21
Lesson 22
Lesson 23
Lesson 24
Lesson 25
Lesson 26
Lesson 27
In the previous lesson we learned to do custom animations using the various flavors of the jQuery animate() method. In this lesson we will build up on what we learned in the previous lesson.

Sometimes we need to stop a running animation on our web page, before it finishes. jQuery provides the stop() method for that purpose. The stop() method works fine for all animations i.e. sliding, fading and the animations we create using the animate() method.

Here is an example:

<a href="javascript:void(0)" onClick="customAnimation();">Play Animation </a> <br>
<a href="javascript:void(0)" onClick="stopAnimation();">Stop Animation</a><br>
<h1 id="animate" style="position:absolute;">Pickatutorial.com</h1>

<script type="text/javascript">
function customAnimation() {
$("#animate").animate({"left" : "450px"}, 25000)
}

function stopAnimation() {
$("#animate").stop();
}
</script>

Clicking on the Play Animation link starts the animation, which, in normal circumstances, is supposed to finish in 25 seconds. During these 25 seconds clicking on the Stop Animation link stops the animation, immediately. This is the default behavior of the stop() method, when used without parameters.

Two optional parameters of the stop() method allow us to have more control over jQuery animations. The first parameter specifies whether the animation queue should be cleared or not. An animation queue refers to the queued animations on the same element like below:

$("#animate").animate({"left" : "450px"}, 5000);
$("#animate").animate({"left" : "50px"}, 3000);
$("#animate").animate({"left" : "250px"}, 7000);

The first parameter to stop() method takes a boolean value, true or false. The default is false which means that that only the active animation shall be stopped, having no effect on any subsequent queued animations. Passing a true to the stop() method means that all queued animation on the element be killed.

The second parameter is a more interesting one. It also takes a boolean value. The default is false that asks the jQuery to stop the animation where it is. Passing true would rush the animation to its finish.

Here is an example:

<a href="javascript:void(0)" onClick="customAnimation();">Play Animation</a> <br>
<a href="javascript:void(0)" onClick="stopAnimation();">Stop Animation Immediately </a><br>
<a href="javascript:void(0)" onClick="rushAnimation();">Rush to Finish Animation </a><br>
<h1 id="animate" style="position:absolute;">Pickatutorial.com</h1>

<script type="text/javascript">
function customAnimation() {
$("#animate").animate({"left" : "450px"}, 15000);
}

function stopAnimation() {
$("#animate").stop();
}

function rushAnimation() {
$("#animate").stop(true, true);
}

</script>

Next >>> Lesson No. 14: jQuery Manipulating HTML DOM







Home - Advertise - Contact - Disclaimer - About Us
© Since 2006 pickatutorial.com -- All Rights Reserved.