I've have 3 divs that I added to the DOM, and I want to slide them into view sequentially.  I have a class on them called 'slide', and I've gotten this far:

$(".slide").each(function(i) {

      var hiddenLeft = $(this).outerWidth(true) * -1;

      $(this).css("left", hiddenLeft + "px")

            .removeClass("hidden")

            .stop().animate({ left: "0px" }, 500, "easeInOutQuad");

}

The "hidden" class simply keeps the slide out of view while I default the first div to have a left that is the negative value of its width( to keep it off screen). This works perfectly, and sure enough, the slide animates in just fine, but as (expected, but not desired), the subsequent 2 slides animate in at the same time.

I'd like to be able to iterate to each after one another and then run the animation. Can someone lead me towards a solution?