I'm trying to combine matching something like:
$(".item").each(function(i) {
//animation here
});
with jQuery's inherent chaining functionality that forces the animation to wait until the previous animation has completed, e.g.:
$(".item").each(function(i) {
$(this).animate({marginLeft:"0"}, 60);
});
And then trigger a .load function after the animations have completed. Basically, I want to fade four items out in order [one after the next, not all at once], then load four new items into the same div, replacing the first four.
How can I do this in a reusable/variable way?
$("#more:not(.disabled)").live("click", function(event) {
event.preventDefault();
var urlPieces = (event.target.href).split("/");
var nextURL = urlPieces[urlPieces.length - 2] + "/" + urlPieces[urlPieces.length - 1];
var items = $(".item");
var itemCount = items.length;
items.each(function(i) {
var passthru = this;
window.setTimeout(function() {
$(passthru).animate({opacity:"0"}, 60, function() {
if (i == itemCount - 1) {
$("#browse").load(nextURL + " .item, #controls", fadeInNew);
}
});
}, 60*i);
});
});
fadeInNew handles the new one by one fade in elsewhere, but this was what I was looking for more or less with a bit of extra code around it to maybe shed some light on what was happening (there's a next arrow with a url in its href, if javascript is on, I need the URL of the next page relative to the current, if it's off, it follows that url as an href and loads a new page which has the same content on the page except for the new items that would have been $.load-ed.