Move a ball using Jquery Animation

By Pankaj Rana Blogs | JQuery May 20, 2013
In this article we move the image of a ball in horizontal direction to and fro using Jquery animation. We using jquery animation’s callback function to move the ball.

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


PREMIUM SPONSORS

Hire Mobile & Web Developer on demand. 100% satisfaction. Try for 1 week or Money Back. Local and remote developers available all over USA.

Latest Blogs