jQuery chain-able state of transition

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:

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; 0

(-)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. 1

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". 2

Check online demo of the application 3

Learn from experts! Attend jQuery Training classes.

jQuery chain-able state of transition

jQuery chain-able state of transition

Tutorials