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();
 });
});

• james: Good abstractions, I must say!!