> Hi everyone,
>
> I'm having the hardest time getting this to work. On a button click,
> I want to animate every div, one after the other, that is a child of
> a div with the id "mainpage".
>
> This is the code I'm using, but I can't seem to make it function
> correctly:
>
> $("#button").click(function(){
> $("#mainpage div").each(function() {
> this.fadeOut(500).animate({opacity: 0.0}, 500);
> });
>
> });
>
> Am I on the right track in trying to get each element to begin fading
> out after the one before it has finished?
This is similar to something that came up last week. One way to
approach this is to write a tiny plugin and use it like this:
$(function() {
$('#button').click(function() {
$('#mainpage div').fadeOutOneByOne();
});
});
jQuery.fn.fadeOutOneByOne = function() {
var $this = this, count = this.length;
fadeOutElement(0);
function fadeOutElement(i) {
var el = $this[i];
jQuery(el).fadeOut(500, function() {
if (++i < count)
fadeOutElement(i);
});
};
};
