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 Custom Animations using animate() 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 lessons we learned to use the jQuery built-in fading and sliding methods.

Going a step forward, jQuery provides us with the animate() method to create custom animations.

Customazing animations is very easy using jQuery and can be done with very few lines of code.

Here is a very simple example:

<a href="javascript:void(0)" onClick="customAnimation();" style="position:right; ">Custom Animation</a><br>
<h1 id="animate" style="position:absolute;">Pickatutorial.com</h1>
<script type="text/javascript">
function customAnimation() {
$("#animate").animate({"left" : "450px"})
}
</script>

The above code uses the jQuery animate() method to slide the text "Pickatutorial.com". The animate() method, takes as mandatory parameter, a map of CSS properties that we need to have altered to produce the desired animation effects. In the above code we have an absolute positioned <h1> element and we ask jQuery to move the same until it reaches a left property of 450 pixels. We can also specify the duration of the animation in milliseconds or as "slow" or "fast", where slow is the same as 600 milliseconds and fast means 200 milliseconds.

Here is an example:

<a href="javascript:void(0)" onClick="customAnimation();" style="position:right; ">Custom Animation</a><br>
<h1 id="animate" style="position:absolute;">Pickatutorial.com</h1>
<script type="text/javascript">
function customAnimation() {
$("#animate").animate({"left" : "450px"}, 5000)
}
</script>

There is another, rather advanced, form of the animate() method, where it takes three parameters. The first two have been explained above and the third one is a callback function that is called on the completion of the animation. The following example demonstrates its usage:

<a href="javascript:void(0)" onClick="customAnimation();" style="left:0px; ">Custom Animation</a><br>
<h1 id="animate" style="position:absolute;">Pickatutorial.com</h1>
<script type="text/javascript">
function customAnimation() {
$("#animate").animate({"left" : "450px"}, 5000, function() {
$("#animate").animate({"left" : "0px"})
})
}
</script>
The above code is a bit complicated, but do not worry with a little practice we can master it. The above code moves our <h1> element from 0 pixel left to 450 pixel left and then back to 0 pixel left.
Next >>> Lesson No. 13: jQuery Controlling Animations





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