[jQuery] Problem with animation queue
Hi there,
I want to fire up a bunch of animations on a single click in a strict
order. Unfortunately it doesn't work every time.
Here is my code:
$("#title02").click(
function () { // the first 3 events should occur together, NOT one
after another
$('#pic0').attr("src", '/images/pic3.jpg');
$("#moreInfoContainer").animate({opacity: 0.0}, 500 );
$("#pic1").animate({opacity: 0.0}, 1200,
function() { // this function shouldn't start bevore ALL THREE
events before have finished. the next three should occur together
again
$("#moreInfoContainer").css("height",150);
$("#moreInfoText").html("some text");
$('#pic1').attr("src", '/images/bild3.jpg').load(
function() {
$('#pic1').animate({opacity: 1.0}, 500,
function() {
$("#moreInfoContainer").animate({opacity: 0.85}, 800);
});
});
});
});
sometimes it works, sometimes soem animations like $
("#moreInfoContainer").animate({opacity: 0.0}, 500 ); (the second one)
occur after almost everything else. How do I get a strict order, so
that some events occur together, and other functions are hold until
everything from before have ended?
I really hope you get my point. Sorry fpr my bad english though ;)
thanks in advance
andy