05
Jul
2012

Move to different position using jQuery

Posted in: jQuery , , No Comments

jquery_logo
In this jQuery tutorial I will show how you can move a selected element to a different position using jQuery. You can also control the move speed.

Step 1:
Prepare a square region which we will move to a different position.
Define a ID box of width: 100px and height: 100px

#box {
width: 100px;
height: 100px;
background: red;
}

Step 2:
Display this box region.

<div id="box"></div>

Step 3:
Call jQuery library

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Step 4:
Now we will add jQuery code in head section and tell it to move ID box to right by 100px and downward by 100px
This event will happen when a link of class move is clicked.

<script type="text/javascript">
$(document).ready(function() {
	$(".move").click(function() {
	$("#box").animate({'margin-top': '200px', 'margin-left': '200px'});
	});
});
</script>

Done!!!
Check below link for live demo.

Move with slow speed

You can set the speed to slow.

<script type="text/javascript">
$(document).ready(function() {
	$(".move").click(function() {
	$("#box").animate({'margin-top': '200px', 'margin-left': '200px'},'slow');
	});
});
</script>

Move with fast speed

You can set speed to fast.

<script type="text/javascript">
$(document).ready(function() {
	$(".move").click(function() {
	$("#box").animate({'margin-top': '200px', 'margin-left': '200px'}, 'fast');
	});
});
</script>

Show with controlled speed

You can set the move speed to a certain value. Use below code to move in 2 seconds

<script type="text/javascript">
$(document).ready(function() {
	$(".move").click(function() {
	$("#box").animate({'margin-top': '200px', 'margin-left': '200px'},2000);
	});
});
</script>

Check below link for live demo.

About the Author

Name: Ravi Shekhar
I love learning and sharing web stuffs.

Share this post

Twitter Facebook Google Buzz Digg StumbleUpon Delicious Technorati

Leave a Reply