A way to make a time intersection in nested queries

I have this code that fades in and out several DIVs one after another:

$('div#faderhome').fadeIn(500, function() {
 $('div#faderhome').delay( delay ).fadeOut(fadeout, function() {
  $('div#faderbranding').fadeIn(500, function() {
   $('div#faderbranding').delay( delay ).fadeOut(fadeout, function() {
    $('div#faderbusiness').fadeIn(500, function() {
     $('div#faderbusiness').delay( delay ).fadeOut(fadeout, function() {
      $('div#fadercontact').fadeIn(500, function() {
       $('div#fadercontact').delay( delay ).fadeOut(fadeout, function() {
        $('div#fadermarketing').fadeIn(500, function() {
         $('div#fadermarketing').delay( delay ).fadeOut(fadeout, function() {
          $('div#faderprofile').fadeIn(500, function() {
           $('div#faderprofile').delay( delay ).fadeOut(fadeout, function() {
            $('div#fadersoftware').fadeIn(500, function() {
             $('div#fadersoftware').delay( delay ).fadeOut(fadeout, function() {
              $('div#faderidentity').fadeIn(500, function() {
               $('div#faderidentity').delay( delay ).fadeOut(fadeout, function() {
                $('div#fadersolutions').fadeIn(500, function() {
                 $('div#fadersolutions').delay( delay ).fadeOut(fadeout, function() {
                  $('div#faderwebsites').fadeIn(500, function() {
                   $('div#faderwebsites').delay( delay ).fadeOut(fadeout, function() {

                       // Animation complete
                   });
                  });
                 });
                });
               });
              });
             });
            });
           });
          });
         });
        });
       });
      });
     });
    });
   });
  });
 });
});

What I'm trying to do is to make a time intersection between all the fade animations, i.e before 500 milliseconds of the fadOut effect, the fadeIn effect starts.

I was searching for a function that works inversely like .delay() but couldn't find one, any ideas?

Update

I did it this way:

var delay = 500;
var fadein = 1000;
var fadeout = 1000;
var intersection = 900;



$('div#faderhome').fadeIn(fadein, function() {
$('div#faderhome').delay( delay ).fadeOut(fadeout);
$('div#faderbranding').delay( intersection ).fadeIn(fadein, function() {
$('div#faderbranding').delay( delay ).fadeOut(fadeout);
$('div#faderbusiness').delay( intersection ).fadeIn(fadein, function() {
$('div#faderbusiness').delay( delay ).fadeOut(fadeout);
$('div#fadercontact').delay( intersection ).fadeIn(fadein, function() {
$('div#fadercontact').delay( delay ).fadeOut(fadeout);
$('div#fadermarketing').delay( intersection ).fadeIn(fadein, function() {
$('div#fadermarketing').delay( delay ).fadeOut(fadeout);
$('div#faderprofile').delay( intersection ).fadeIn(fadein, function() {
$('div#faderprofile').delay( delay ).fadeOut(fadeout);
$('div#fadersoftware').delay( intersection ).fadeIn(fadein, function() {
$('div#fadersoftware').delay( delay ).fadeOut(fadeout);
$('div#faderidentity').delay( intersection ).fadeIn(fadein, function() {
$('div#faderidentity').delay( delay ).fadeOut(fadeout);
$('div#fadersolutions').delay( intersection ).fadeIn(fadein, function() {
$('div#fadersolutions').delay( delay ).fadeOut(fadeout);
$('div#faderwebsites').delay( intersection ).fadeIn(fadein, function() {
$('div#faderwebsites').delay( delay ).fadeOu开发者_如何转开发t(fadeout, function() {


        // Animation complete


});});});});});});});});});});});

This way I'm having an intersection of 100ms between the fadeIn and fadeOut animations, thanks to @T.J. Crowder

Since you're trying to overlap the animations (have one start before the previous one finishes), rather that using the completion callback on the previous animation (which is usually the right thing, but not in this case), just use delay with a slightly shorter timeout than the fadeOut. E.g.:

$("#theFirstElement").fadeOut(500);
$("#theNextElement").delay(400).fadeIn(500);

That way, the fadeIn will overlap with the fadeOut by 100ms or so.

Off-topic (slightly): Since you're going to be changing that code anyway, I'd strongly recommend refactoring it a bit. Put the things you plan to animate in an array and then loop over the array.

Completely untested, but I think it ends up looking like this:

var elements = [
        $('div#faderhome'),
        $('div#faderbranding'),
        $('div#faderbusiness'),
        $('div#fadercontact'),
        $('div#fadermarketing'),
        $('div#faderprofile'),
        $('div#fadersoftware'),
        $('div#faderidentity'),
        $('div#fadersolutions'),
        $('div#faderwebsites')
    ],
    index,
    fadeInTime = 500,
    fadeOutTime = 500,
    overlap = 100;

for (index = 0; index < elements.length; ++index) {
    elements[index]
        .delay(index === 0 ? 0 : (index * (fadeInTime + fadeOutTime)) - overlap)
        .fadeIn(fadeInTime)
        .delay(fadeInTime)
        .fadeOut(fadeOutTime);
}

Live example

As you can see, first I create an array of the elements to animate, then set up some variables (constants, really) for the fade in time, fade out time, and overlap, and then loop through the array using increasingly-long delays on the beginning of the animation (by multiplying the times by the index variable).

Give each div a class e.g. my_class

http://jsfiddle.net/uQ2rv/

CODE

var all = $('div.my_class');
var release = false;
function fader(i){
    if(i==all.length) return false;//so it don't go on and on ... or use the animation complete here :)
    $(all.eq(i)).fadeIn(500, function() {
        $(all.eq(i)).fadeOut(500,function (){
             i++;
             fader(i);
        });
    });

}
fader(0);