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

jQuery Animate

The jQuery animate method has a complete method we can supply with callback function that is fired once the animation is complete. This can be useful for stringing different animations together in sequence like this example.

Other examples in Animations (Jquery Tutorial)

Result from the Online TryIt-Editor

<!doctype html>
<html>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript">
</script>
<script type="text/javascript">
    $(document).ready(function () {
        var shouldstop = false;
        $("#stopanimation").click(function () {
            shouldstop = true;
        });
        $("#startanimation").click(function myf() {
            $("p").animate({ height: 200 }, "slow", col);
            $("p").animate({ width: 200 }, "slow", col);
            $("p").animate({ height: 100 }, "slow", col);
            $("p").animate({ width: 100 }, "slow",
                         function () {
                             if (shouldstop == true)
                                 return;
                             col();
                             myf();
                         });
        });
        function col() {
            r = Math.floor(Math.random() * 250);
            g = Math.floor(Math.random() * 250);
            b = Math.floor(Math.random() * 250);
            $("p").css("background-color", "rgb(" + r + "," + g + "," + b + ")");
        }
    });
</script>
<body>
    <button id="startanimation">
        Start Animation
    </button>
    <button id="stopanimation">
        Stop Animation
    </button>
    <p style="background: #98bf21; height: 100px; width: 100px; position: relative">
    </p>
</body>
</html>

^1.0

^1.0

^1.0

^4.0

^5.0

jQuery Animate

Useful Information