Home Ajax Jquery jQuery chain-able state of transition
Questions:Ask|Latest

 
 

Share on Google+Share on Google+

jQuery chain-able state of transition

Advertisement
In this JQuery tutorial we will develop a program that changing the state of transition of box moving starting Left -> Right After

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.

Advertisement

If you enjoyed this post then why not add us on Google+? Add us to your Circles



Liked it!  Share this Tutorial


Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.

Posted on: September 8, 2008

Related Tutorials

Ask Questions?    Discuss: jQuery chain-able state of transition  

Post your Comment


Your Name (*) :
Your Email :
Subject (*):
Your Comment (*):
  Reload Image
 
 
Comments
DMCA.com