Student Project GuideThis will show how to move Ball Left, Right, Up and Down using Jquery Animation. In this example we have created four button. The right button moves ball to the right, left button moves ball to the left, down button moves ball to down and up button moves ball to the up.
Source Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Jquery Animation Ball - Up, Down, Right, Left</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<style type="text/css">
img{
position: relative; /* Required to move element */
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$("#button1").click(function(){
$("img").animate({
left:500
});
});
$("#button2").click(function(){
$("img").animate({
left:0
});
});
$("#button3").click(function(){
$("img").animate({
top:500
});
});
$("#button4").click(function(){
$("img").animate({
top:0
});
});
});
</script>
</head>
<body>
<button id="button1">Go Right</button>
<button id="button2">Go Left</button>
<button id="button3">Go Down</button>
<button id="button4">Go Top</button>
<p>
<img src="ball.gif" width="100" height="100" alt="Mushroom">
</p>
</body>
</html> 