Creating custom animations in jQuery
Posted on: April 18, 2011 By Deepak Kumar
Posted on: April 18, 2011 By Deepak Kumar
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).
animateImage.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <script type="text/javascript" src="jquery-1.4.2.js"></script> </HEAD> <BODY> <div id="clickme" > <font color="red"> Click here </font> </div> <img id="book" src="images/jquery5.jpeg" alt="" width="200" height="223" style="position: relative; left: 10px;" />
<script>
$('#clickme').click(function() {
$("#targetDiv").hide();
$('#book').animate({
opacity: 0.25,
left: '+=50',
height: 'toggle'
}, 5000, function() {
// Animation complete.
$("#targetDiv").html("<h3>"+ "Click again above link to animate"
+ "</h3>").fadeIn("slow");
});
});
</script>
<font color="blue">
<div id="targetDiv" style="display: none;"></div>
</font>
</BODY>
</HTML>
|
Output :
Before Click :
After Click :
Again after 3rd click :
Learn from experts! Attend jQuery Training classes.
|
Recommend the tutorial |
Comments
Ask Questions? Discuss: Creating custom animations in jQuery
Post your Comment