Sequential animations

Question

This is all about a whole lot of animations which should happen sequentially. That's why I am using promise().done() functions. In the end I'm binding a function to the mousemove event (similar to a dragging feeling on hover).

How can I optimize / shorten it?

function showSpecialNavigation(){
    $('.special-navigation_section').each(function(i) {
        $(this).delay(400*i).fadeIn('fast');
        $(this).find('li').each(function(i2) {
            $(this).delay(400*i).fadeIn('800');
        });
    }).promise().done(function(){
        $(".special-navigation_section").each(function(i3) {
            $(this).find('a.transition_text').fadeIn('800');
        }).promise().done(function(){
            $(".showup1").each(function(i4) {
                $(this).delay(50*i4).fadeIn('fast').delay(10).find('img').fadeIn('fast');
            }).promise().done(function(){
                $(".showup2").each(function(i5) {
                    $(this).delay(50*i5).fadeIn('fast').delay(10).find('img').fadeIn('fast');
                }).promise().done(function(){
                    $(".showup3").each(function(i6) {
                        $(this).delay(50*i6).fadeIn('fast').delay(10).find('img').fadeIn('fast');
                    }).promise().done(function(){
                        $(".showup4").each(function(i7) {
                            $(this).delay(50*i7).fadeIn('fast').delay(10).find('img').fadeIn('fast');
                        }).promise().done(function(){
                            $(".showup5").each(function(i8) {
                                $(this).delay(50*i8).fadeIn('fast').delay(10).find('img').fadeIn('fast');
                            }).promise().done(function(){
                                $(".showup1, .showup2, .showup3, .showup4, .showup5").find('.handle').css({display: 'block'});
                                $(".dragged").each(function(i9) {
                                    $(this).delay(20*i9).animate({width: '130px'}, 300);
                                }).promise().done(function(){
                                    $(".transition").bind("mousemove", function(event){
                                        var dragged         =   $(this).find('.dragged');
                                        var containerWidth  =   $(this).width();

                                        var stopLeft        =   56;
                                        var stopRight       =   132;
                                        var mouse2Container =   event.pageX - $(this).offset().left;
                                        var controller      =   mouse2Container-56;

                                        if((stopRight > mouse2Container) && (mouse2Container > stopLeft)){
                                            dragged.stop(true, false).animate({left: controller}, 200);
                                        }
                                    });
                                });
                            });
                        });
                    });
                });
            });
        });
    }); 
}

Answer 1

In the interest of eliminating all duplicate code, here's a way to make the nested showupN pieces of code all get executed in one function:

function showSpecialNavigation(){
    var showIndex = 1;
    var maxShowIndex = 5;   // process from .showup1 to .showup5
    var allShows = $();     // initially empty object of .showupNN objects

    function setDrag() {
        allShows.css({display: 'block'});
        $(".dragged").each(function(i9) {
            $(this).delay(20*i9).animate({width: '130px'}, 300);
        }).promise().done(function(){
            $(".transition").bind("mousemove", function(event){
                var dragged         =   $(this).find('.dragged');
                var containerWidth  =   $(this).width();

                var stopLeft        =   56;
                var stopRight       =   132;
                var mouse2Container =   event.pageX - $(this).offset().left;
                var controller      =   mouse2Container-56;

                if((stopRight > mouse2Container) && (mouse2Container > stopLeft)){
                    dragged.stop(true, false).animate({left: controller}, 200);
                }
            });
        });
    }

    function showup() {
        var showList = $(".showup" + showIndex++);
        // accumulate all showupNN we've processed for use later
        allShows = allShows.add(showList);

        // set doneCnt so we know when all are done
        var doneCnt = showList.length;
        showList.each(function(i) {
            $(this).delay(50*i).fadeIn('fast').delay(10).find('img').fadeIn('fast', function() {
                // when last one is done, go to the next level or the next activity
                --doneCnt;
                if (doneCnt == 0) {
                    if (showIndex <= maxShowIndex) {
                        // go to next level of .showupNN
                        showup();
                    } else {
                        // go to next activity after 
                        setDrag();
                    }
                }

            });
        });
    }

    var navs = $('.special-navigation_section');
    navs.each(function(i) {
        $(this).delay(400*i).fadeIn('fast');
        $(this).find('li').each(function() {
            $(this).delay(400*i).fadeIn('800');
        });
    }).promise().done(function(){
        navs.find('a.transition_text').fadeIn('800');
    }).promise().done(function(){
        showup();
    });
});