Previous chapter (Jquery Tutorial - Plugins)Next chapter (Jquery Tutorial - Utilities)

jQuery User Controlled Animation

jQuery Animate can function supports animation in different directions

Other examples in Animations (Jquery Tutorial)

Result from the Online TryIt-Editor

<!doctype html>
<html>
<head>
    <title>HtmlNest.com live html example</title>
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        var crate_rot = 0;
        $(document).ready(function () {
            $("#up").click(function ()
            { $('#moveit').stop().animate({ top: '-=64px' }, 500) });
            $("#left").click(function ()
            { $('#moveit').stop().animate({ left: '-=64px' }, 500) });
            $("#right").click(function ()
            { $('#moveit').stop().animate({ left: '+=64px' }, 500) });
            $("#down").click(function ()
            { $('#moveit').stop().animate({ top: '+=64px' }, 500) });
        });
    </script>
</head>
<body>
    <div class="Box">
        <div id="moveit" style="position: absolute; top: 50px; left: 50px; width: 32px; height: 32px;
            background: red;">
        </div>
    </div>
    <span style="display: block; text-align: center">
        <input type="button" value="Up" id="up" />
    </span><span style="display: block; text-align: center">
        <input type="button" value="Left" id="left" />
        <input type="button" value="Right" id="right" />
    </span><span style="display: block; text-align: center">
        <input type="button" value="Down" id="down" />
    </span>
</body>
</html>

^1.0

^1.3

^1.0

^5.0

^6.0

jQuery User Controlled Animation

Useful Information