I had a challenge to get four divs to fade in sequentially.
Writing this out the long way is not really my favorite:
$("#vehicle1").fadeIn("slow", function(){ $("#vehicle2").fadeIn("slow", function(){ $("#vehicle3").fadeIn("slow", function(){ $("#vehicle4").fadeIn("slow"); }); }); });
Ewwww. right?
After some conversation in the #jQuery IRC channel, I present two classier ways of accomplishing the same thing:
Self-executing callback chaining
(function showVehicle(elem){ elem.fadeIn('slow',function(){ $(this).next().length && showVehicle($(this).next()); }); })( $("div.vehicle:first") );
Custom event triggering (via: ajpiano)
$('div.vehicle') .bind('showVehicle',function(e) {$(this).fadeIn('slow',function(){ $(this).next().length && $(this).next().trigger("showVehicle"); })}) .eq(0) .trigger('showVehicle');
0 comments ↓
There are no comments yet...Kick things off by filling out the form below.
Leave a Comment