Edit in JSFiddle

$(function () {
            $("#btn_animate").click(function () {
                $("#div1")
                    .animate({ left: '+=100px', height: 'hide' }, 1000)
                    .animate({ top: '+=100px', height: 'show' }, 1000)
                    .animate({ left: '-=100px', height: 'hide' }, 1000)
                    .animate({ top: '-=100px', height: 'show' }, 1000);
            });

            $("#btn_queue").click(function () {
                $("#div2")
                    .animate({ left: '+=100px', height: 'toggle' }, 1000)
                    .queue(function () {
                        $(this).css("backgroundColor", "red").dequeue();
                    })
                    .animate({ top: '+=100px', height: 'toggle' }, 1000)
                    .queue(function () {
                        $(this).css("backgroundColor", "blue").dequeue();
                    })
                    .animate({ left: '-=100px', height: 'toggle' }, 1000)
                    .queue(function () {
                        $(this).css("backgroundColor", "red").dequeue();
                    })
                    .animate({ top: '-=100px', height: 'toggle' }, 1000)
                    .queue(function () {
                        $(this).css("backgroundColor", "blue").dequeue();
                    });
            });


            $("#btn_delay").click(function () {
                $("#div3").animate({ left: '+=100px', height: 'hide' }, 1000)
                    .delay(2000)
                    .animate({ top: '+=100px', height: 'show' }, 1000)
                    .delay(2000)
                    .animate({ left: '-=100px', height: 'hide' }, 1000)
                    .delay(2000)
                    .animate({ top: '-=100px', height: 'show' }, 1000);
            });

            $("#btn_stop").click(function () {
                $("#div1").stop();
                $("#div2").stop(true, false);
                $("#div3").stop(true, true);
            });

            $("#btn_finish").click(function () {
                $("#div1").finish();
                $("#div2").clearQueue().stop();
                $("#div3").clearQueue().finish();
            });
        });

<input id="btn_animate" type="button" value="animate" />
            <input id="btn_queue" type="button" value="queue" />
            <input id="btn_delay" type="button" value="delay" />
            <input id="btn_stop" type="button" value="stop" />
            <input id="btn_finish" type="button" value="finish" />
            <div id="div1" style="background-color: blue; width: 100px; height: 100px; left: 100px; top: 100px; position: absolute"></div>
            <div id="div2" style="background-color: blue; width: 100px; height: 100px; left: 300px; top: 100px; position: absolute"></div>
            <div id="div3" style="background-color: blue; width: 100px; height: 100px; left: 500px; top: 100px; position: absolute"></div>