Question

Here is my code:

$('#gallery-listA li.thumbnail').click(function() {
            $(this).addClass('chosen');
            $('')
            $('#gallery-listA li.thumbnail').not(this).addClass('notchosenA');
            $('#gallery-listB li.thumbnail').addClass('notchosenB');
            $('.notchosenB').fadeTo(500,0.0)
            $('.notchosenB').hide(300);
            });

The fadeTo and hide animations run in parallel instead of in succession. I could load the animations as callbacks or put them into a queue manually, but isn’t jQuery supposed to queue animations automatically? Does anyone see what my mistake here is?

Answer 1

If you want to do something when the fadeTo animation completes, then put it on the completion function for the fadeTo animation.

$('.notchosenB').fadeTo(500,0.0, function() {
    $(this).hide();
});

Also, I don’t think it makes any sense to send a duration with .hide(300) when the object is already at zero opacity so I removed that duration.

Since you are fading to zero opacity, it’s even better to just use .fadeOut() which will fade to zero opacity and then automatically hide the item at the end so you don’t need the .hide()

$('.notchosenB').fadeOut(500);

Working demo here: http://jsfiddle.net/jfriend00/ZrPL2/.

jQuery will queue successive animations, but .hide() is apparently not considered an animation so it doesn’t go into the queue (which I verified in a jsFiddle). You can see that this will queue them all to run sequentially:

$("#test").fadeOut(400).fadeIn(1000).fadeOut(400).fadeIn(1000); 

See it here: http://jsfiddle.net/jfriend00/wBbnK/