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:

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