Jquery horizontal sliding div

Posted: April 5, 2011 in HTML, Jquery

<script language="javascript" src="http://code.jquery.com/jquery-1.5.2.js"></script>
<script language="javascript">
$(document).ready(function() {
 var out = 0;
 $("#arrow").click(function(){
 if(out==0)
 {
 $("#inner").animate({marginRight: "0px"}, 500 );
 out=1;
 }
 else
 {
 $("#inner").animate({marginRight: "-100px"}, 500 );
 out=0;
 }
 });
});
</script>

<div style="background-color: rgb(204, 204, 204); height: 300px; width: 300px; overflow: hidden;">
 <div style="height: 100px; width: 100px; background-color: rgb(0, 204, 102); float: right; margin-right:-100px;" id="inner">Form is here</div>
 <div style="height: 100px; width: 50px; background-color: rgb(255, 0, 0); float: right; cursor: pointer;" id="arrow">Arrow is here</div>
</div>



 

 

Advertisements
Comments
  1. Lindcy says:

    I was looking for it. This is really helpful. Thanks.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s