Creating custom animations in jQuery

This page discusses - Creating custom animations in jQuery

Creating custom animations in jQuery


Creating custom animations in jQuery

You can perform custom animation by using '.animate( )'  method .

Example :

In this example , we are animating a image using animate function of jQuery. We can do following things during animation using it's attribute (attributes are given inside braces):

1.Can reduce Image opacity(opacity).

2.Can reduce the height of Image(left).

3.Can shift Image position to left at a given distance(height).


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  <TITLE> New Document </TITLE>
  <script type="text/javascript" src="jquery-1.4.2.js"></script>

 <div id="clickme" >
 <font color="red">
  Click here
<img id="book" src="images/jquery5.jpeg" alt="" width="200" height="223"
 style="position: relative; left: 10px;" /> 

$('#clickme').click(function() {
    opacity: 0.25,
    left: '+=50',
    height: 'toggle'
  }, 5000, function() {
    // Animation complete.
	$("#targetDiv").html("<h3>"+ "Click again above link to animate" 
+ "</h3>").fadeIn("slow");


<font color="blue">
<div id="targetDiv" style="display: none;"></div>

Output :

Before Click :

After Click :

Again after 3rd click :

Download Source Code

Click here to see online demo

Learn from experts! Attend jQuery Training classes.