animate an element after teh previous animation finishes
I would like to have my page fade in slowly, once that is done the menu items should fade in slowly one at a time.
Here is what I have so far:
first I hide everything
-
$("body").hide();
$("body").hide().find("ul#mainMenu").children("li").each(function(e) {
$(this).hide();
});
then I fade everything back in
-
$("body").fadeIn(3500).end()
.find("ul#mainMenu").children("li").each(function(e) {
$(this).css("display","inline-block").fadeIn(1000);
});
However, this makes everything fade in at once.
I noticed that the fadeIn() function allows for a callback. This would allow me to separate the fade in of the body from that of the menu, by encapsulating it in a function.
That same process will not work inside of the each() function, if this is incorrect please let me know; unless I use a recursive function.
That seems messy and difficult compared to how easy everything is in JQuery.
It would be great if instead I simply had a way of telling the script to wait or not move on until the effect was done.
That is what I thought end() was. But that I realized that only changes $(this) to point to the original element/object.
I am new to JQuery and I think I am still thinking in the MooTools way. (using '.chain()', 'onComplete:', and wait:true)
For a moment I thought a queue would work but that would simply have a list of actions applied to the same $this. Again some recursive function might work ut I do not see how I would pass the correct parameter/element.