Question

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 ).fadeOut(fadeout, function() {


        // Animation complete


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

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

Answer 1

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).