Scene management in jQuery Part4

シーン内で違うオブジェクトのアニメを単純にチェーンしたい場合もあるからpipeつかったけどdeferredオブジェクトの名前変えたりしなきゃダメだからなんかキモい。というかシーン1内で別々にアニメさせたいものとか出てくると更にカオスになる予感。

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);
            };
            $.Deferred(function(defer_inner){
                defer_inner
                    .pipe(scene1_1)
                    .pipe(scene1_2)
                    .pipe(function(){
                        console.log('Scene 1 is over');
                        defer.resolve();
                    });
            }).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...