In this blog we move the image of a ball in horizontal
direction to and fro using Jquery animation. We usejquery animation's callback
function to move the ball.
|
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
div
{
position: relative;
background-color: #abc;
float: left;
margin: 5px;
}
</style>
<script type="text/javascript"
src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<div class="block">
<img src="http://aeiou940124.files.wordpress.com/2012/10/4371gymnastic_ball.jpg?w=300&h=300.jpg"
alt="image" />
</div>
<script type="text/javascript">
$(document).ready(function
() {
move();
});
function move() {
$(".block:first").animate({
left: 900
}, {
duration: 5000,
complete: function () {
$(".block:first").animate({
left: 40 }, { duration: 5000,
complete: function () {
move();
}
});
}
});
}
</script>
</body>
</html> |
Jquery Callback Anumation