|
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
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
