Scene management in jQuery Part1

by FiNGAHOLiC

HTML

<script src="https://getfirebug.com/firebug-lite-debug.js"></script>
<div id="box1"></div>
<div id="box2"></div>

CSS

#box1{ width:50px; height:50px; position:absolute; top:0; left:0; z-index:1; background:#000; }
#box2{ width:50px; height:50px; position:absolute; top:0; right:0; z-index:1; background:#c00; }

JavaScript

$(function(){

    var scene1 = function(){
        var $box1 = $('#box1');
        return $box1.animate({
            left : 200
        }, 1000).animate({
            top : 200
        }, 1000).animate({
            left : 0
        }, 1000).animate({
            top : 0
        }, 1000);
    };

    var scene2 = function(){
        var $box2 = $('#box2');
        return $box2.animate({
            right : 200
        }, 1000).animate({
            top : 200
        }, 1000).animate({
            right : 0
        }, 1000).animate({
            top : 0
        }, 1000);
    };

    (function(){
        $.Deferred()
            .resolve()
            .pipe(scene1)
            .pipe(scene2);
    })();

});