Moving Div by button click using animate effect

Home Tutorial Jquery Moving Div by button click using animate effect

Moving Div by button click using animate effect
Posted on: August 2, 2010 at 12:00 AM

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">«</button> <button id="right">»</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

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

«Previous Index Next»

Ask Questions?

If you are facing any programming issue, such as compilation errors or not able to find the code you are looking for.

Ask your questions, our development team will try to give answers to your questions.

Tutorial Topics