jQuery chain-able state of transition
In this JQuery tutorial we will develop a program that changing the state of transition of box moving starting Left -> Right After
bottom->top after it Right->Left After it Top to Bottom
Steps to develop the chain-able state transition.
Step 1:
Create a new file (statetransition.html) and add the following code into it:
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Jquery Tranisition Effects</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".start").click(function(){ $("#box").animate({opacity: ".1", left: "+=400"}, 1200) .animate({opacity: "1", top: "-=160", height: "+=200", width: "+=200"}, "slow") .animate({opacity: "1", left: "0", height: "100", width: "100"}, "slow") .animate({top: "0"}, "fast") .slideUp("fast") .slideDown("slow") return false; }); }); </script> <style type="text/css"> body { margin: 20px auto; padding: 0; width: 580px; font: 80%/120% Arial, Helvetica, sans-serif; } a { font-weight: bold; color: #000000; } #box { background: #FF0000; height: 100px; width: 100px; position: relative; } </style> </head> <body> <br><br><br><br><br><br><br><br> <p><a href="#" class="start">Start</a></p> <table width="100%" align="center"><tr><td> <div id="box"> </div> </td></tr></table> </body> </html> |
Program explanation:
The following code includes the jQuery JavaScript library file:
<script type="text/javascript" src="jquery.js"></script>
The Code
$(".start").click(function()
This function works when click on the start link.
After that it calls animate function having id box.
$("#box").animate(
.....
...
)
This function having different parameter
1.opacity:This property set to visuality of a box this is set to 1;
2.left : Set the relative postion from Left .
(+) is for Left To Right from the relative postion;
(-)Right To Left from the relative position
3.top : Set the relative position from right.
(+) is for Top To Bottom from the relative postion;
(-)s for Bottom To Top from the relative postion;
4.height:Set the height when the box is changing its state.
5.width:Set the width when the box is changing its state.
6.Last attributes of this function set the speed of a box "1200".
7.slideUp() this function is slide the box up having three arguments:"slow","fast" and by default "normal".
7.slideDown() this function is slide the box Down having three arguments:"slow","fast" and by default "normal".

Check online demo of the application
Learn from experts! Attend jQuery Training classes.
If you are facing any programming issue, such as compilation errors or not able to find the code you are looking for.
Ask your questions, our development team will try to give answers to your questions.
Ask Questions? Discuss: jQuery chain-able state of transition
Post your Comment