fadeTo exécute avant .attr changement si la source première dans

Question

Voici un morceau de 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);   }); 

    }); 
}); 

Je ne comprends pas pourquoi la modification de .attr sur #mainGraphic se produit avant le fondu qui le précède dans la source commande. Ce qui devrait arriver est: un clic est fait, quelque chose glisse, le #mainGraphic s'estompe à presque rien, est remplacé, puis s'estompe.

Comme c'est le cas, je clique, la diapositive est faite, puis #mainGraphic est remplacé, puis se fane dedans/dehors.

Il semble que les changements .attr sont plus anciens que les fondus?

Answer 1

.attr() Les modifications ne font pas partie de la file d'attente FX, de sorte qu'elles se produisent de façon asynchrone à partir d'effets.

Une option consiste à appeler la modification .attr() dans le rappel .fadeTo().

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