Scene management in jQuery Part3

シーン内で違うオブジェクトをチェーンさせずに別々にアニメさせたい時はwhenでやってみた。一番最後のアニメに.promise.done()でresolveしてもいいけど。

by FiNGAHOLiC

HTML

<script src="https://getfirebug.com/firebug-lite-debug.js"></script>
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
<div id="box4"></div>
<div id="box5"></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; bottom:0; left:0; z-index:1; background:#000; }
#box3{ width:50px; height:50px; position:absolute; top:0; right:0; z-index:1; background:#c00; }
#box4{ width:50px; height:50px; position:absolute; bottom:0; right:0; z-index:1; background:#c00; }
#box5{ width:100%; height:100%; position:absolute; top:0; left:0; z-index:2; background:#000; display:none; }

JavaScript

$(function(){

    // Set jQuery object
    var $box1 = $('#box1');
    var $box2 = $('#box2');
    var $box3 = $('#box3');
    var $box4 = $('#box4');
    var $box5 = $('#box5');

    // Scene 1
    var scene1 = function(){
        return $.Deferred(function(defer){
            // Animation 1-1
            var scene1_1 = function(){
                return $box1.animate({
                    left : 200
                }, 500).animate({
                    top : 200
                }, 500).animate({
                    left : 0
                }, 500).animate({
                    top : 0
                }, 500);
            };
            // Animation 2-1
            var scene1_2 = function(){
                return $box2.delay(1000).animate({
                    left : 200
                }, 500).animate({
                    bottom : 200
                }, 500).animate({
                    left : 0
                }, 500).animate({
                    bottom : 0
                }, 500);
            };
            $.when(
                scene1_1(),
                scene1_2()
            ).done(function(){
                console.log('Scene 1 is over');
                defer.resolve();
            });
        }).promise();
    };

    // Scene 2
    var scene2 = function(){
        return $.Deferred(function(defer){
            // Animation 2-1
            var scene2_1 = function(){
                return $box3.animate({
                    right : 200
                }, 500).animate({
                    top : 200
                }, 500).animate({
                    right : 0
                }, 500).animate({
                    top : 0
                }, 500);
            };
            // Animation 2-2
            var scene2_2 = function(){
                return $box4.delay(1000).animate({
                    right : 200
                }, 500).animate({
                    bottom : 200
                }, 500).animate({
                    right : 0
      ...