This tutorial we will move ball in left to right and right to left in both direction using jQuery Animation. We use jquery animation’s callback function.
jQuery animate() function is used to perform a custom animation of a set of CSS properties. This method allows you to create custom animation only on numeric properties. For example, the properties with numeric values such as width, left, height, opacity can be used with animate() method, but the property like background-color cannot be animated since it has a string value.
Move Ball Using JQuery Animation Demo
CSS Code
#ballContainer
{
float: left;
position: relative;
}
HTML Code
<div id="ballContainer"> <img src="images/ball.png" width="200px" alt="image" /> </div>
jQuery Code
In moveBall() method first we move the div #ballContainer to right, do it by changing the value of property left to 900px inside the animate method, once animation is done call complete: Function(), inside this function move the div #ballContainer to left, do it by changing the value of property left to 10px inside the animate method. After complete second animation call complete: Function() then we call moveBall() method to continue move ball process in both direction.
<script type="text/javascript">
$(function() {
moveBall();
});
function moveBall() {
$("#ballContainer:first").animate({
left: 900
}, {
duration: 3000,
complete: function() {
$("#ballContainer:first").animate({
left: 10
}, {
duration: 3000,
complete: function() {
moveBall();
}
});
}
});
}
</script>
Index.html
In this file we contains complete code with HTML, CSS and JQuery.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Move Ball using JQuery Animation</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<style type="text/css">
#ballContainer {
float: left;
position: relative;
}
.top-buffer {
margin-top: 50px;
}
</style>
<script type="text/javascript">
$(function() {
moveBall();
});
function moveBall() {
$("#ballContainer:first").animate({
left: 900
}, {
duration: 3000,
complete: function() {
$("#ballContainer:first").animate({
left: 10
}, {
duration: 3000,
complete: function() {
moveBall();
}
});
}
});
}
</script>
</head>
<body>
<div class="container">
<h2 class="text-center p-3 mb-2 bg-primary text-white">Demo: Move a ball using Jquery</h2>
<div class="row">
<div class="col-sm-12 top-buffer">
<div id="ballContainer">
<img src="images/ball.png" width="200px" alt="image" />
</div>
</div>
</div>
</div>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>