Scene management in jQuery Part2

by FiNGAHOLiC

HTML

<script src="https://getfirebug.com/firebug-lite-debug.js"></script>
<div id="box1_1"></div>
<div id="box1_2"></div>
<div id="box2_1"></div>
<div id="box2_2"></div>
<div id="box3_1"></div>

CSS

#box1_1{ width:50px; height:50px; position:absolute; top:0; left:0; z-index:1; background:#000; }
#box1_2{ width:50px; height:50px; position:absolute; bottom:0; left:0; z-index:1; background:#000; }
#box2_1{ width:50px; height:50px; position:absolute; top:0; right:0; z-index:1; background:#c00; }
#box2_2{ width:50px; height:50px; position:absolute; bottom:0; right:0; z-index:1; background:#c00; }
#box3_1{ width:100%; height:100%; position:absolute; top:0; left:0; z-index:2; background:#000; display:none; }

JavaScript

$(function(){

    // Define jQuery element
    var $box1_1 = $('#box1_1');
    var $box1_2 = $('#box1_2');
    var $box2_1 = $('#box2_1');
    var $box2_2 = $('#box2_2');
    var $box3_1 = $('#box3_1');

    // Scene 1
    var scene1 = function(){
        return $.Deferred(function(defer){
            // Animation 1-1
            $box1_1.animate({
                left : 200
            }, 500).animate({
                top : 200
            }, 500).animate({
                left : 0
            }, 500).animate({
                top : 0
            }, 500);
            // Animation 2-1
            $box1_2.delay(1000).animate({
                left : 200
            }, 500).animate({
                bottom : 200
            }, 500).animate({
                left : 0
            }, 500).animate({
                bottom : 0
            }, 500).promise().done(function(){
                // Notice of scene 1 is over
                defer.resolve();
            });
        }).promise();
    };

    // Scene 2
    var scene2 = function(){
        return $.Deferred(function(defer){
            // Animation 2-1
            $box2_1.animate({
                right : 200
            }, 500).animate({
                top : 200
            }, 500).animate({
                right : 0
            }, 500).animate({
                top : 0
            }, 500);
            // Animation 2-2
            $box2_2.delay(1000).animate({
                right : 200
            }, 500).animate({
                bottom : 200
            }, 500).animate({
                right : 0
            }, 500).animate({
                bottom : 0
            }, 500).promise().done(function(){
                // Notice of scene 2 is over
                defer.resolve();
            });
        }).promise();
    };

    // Scene 3
    var scene3 = function(){
        return $.Deferred(function(defer){
            // Animation 3
            $box1_1.animate({
                top : 200,
               ...