Home Tutorial Jquery Moving Div by button click using animate effect

 
 

Share on Google+Share on Google+
Moving Div by button click using animate effect
Posted on: August 2, 2010 at 12:00 AM
Advertisement
In this tutorial , we will discuss how to move 'div' left-right by button click using jQuery.

Moving Div by button click using animate effect

In this tutorial , we will discuss how to move 'div' left-right by button click using jQuery. In this example , 'div' is moving left / right by left / right button click.

animateBox.html

<!DOCTYPE html>
<html>
<head>
<style>
div {
position:absolute;
background-color:#abc;
left:50px;
width:90px;
height:90px;
margin:5px;
}
</style>
<script src="jquery-1.4.2.js"></script>
</head>
<body>
<button id="left">&laquo;</button> <button id="right">&raquo;</button>
<div class="block"></div>

<script>
$("#right").click(function(){
$(".block").animate({"left": "+=50px"}, "slow");
});

$("#left").click(function(){
$(".block").animate({"left": "-=50px"}, "slow");
});

</script>
</body>
</html>

OUTPUT

Before click :

After Clicking "left" button  :

Download Source Code

 

Click here to see demo

Advertisement

Related Tags for Moving Div by button click using animate effect:


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: August 2, 2010

Recommend the tutorial

Advertisements Advertisements
 

 

 

DMCA.com