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>                            

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.