fadeTo executes before .attr change though first in source

Question

Here is a piece of code:

$(document).ready(function() {
    $('#nextBtn').live('click',
    function() {
        $(this).attr('id', 'next2Btn')
        $('#cs_contentToSlide').animate({
            left: '-=500',
        },
        200,
        function() {
            $('#stateGraphic').attr('src', 'images/state2_3stage.gif');
             $('#mainGraphic').fadeTo(900, 0.10);
    $('#mainGraphic').attr('src', 'images/assess3.gif');
    $('#mainGraphic').fadeTo(300, 1.0);            });

    });
});

I don't understand why the .attr edit on #mainGraphic occurs before the fade that precedes it in the source order.

What should happen is: a click is made, something slides, the #mainGraphic fades down to almost nothing, gets replaced, then fades back up.

As it is, I click, the slide is made, then #mainGraphic gets replaced and then fades in/out.

It appears that .attr changes are more senior to fades?

Answer 1

.attr() changes are not part of the FX queue, so they happen asynchronously from effects.

One option is to call the .attr() change in the .fadeTo() callback.

...
$'#mainGraphic'.fadeTo(900, 0.10, function(){
    $(this).attr('src', 'images/assess3.gif');
})
.fadeTo(300, 1.0);
});