Sequential animations
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 &gt; mouse2Container) &amp;&amp; (mouse2Container &gt; 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 &lt;= 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();
    });
});