Jquery Animation Ball

This 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.

Watch this video in youtube

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>

Download JQuery Animation Code:Download

🔥662 Views