1
\$\begingroup\$

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);
                                        }
                                    });
                                });
                            });
                        });
                    });
                });
            });
        });
    }); 
}
\$\endgroup\$
1
\$\begingroup\$

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();
    });
});
\$\endgroup\$
  • \$\begingroup\$ Good abstractions, I must say!! \$\endgroup\$ – james Apr 3 '12 at 14:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.