fadeTo执行之前.attr更改虽然先在源代码中执行

Question

这是一段代码：

$(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);            });

    });
});

我不明白为什么#mainGraphic上的.attr编辑发生在源顺序中它之前的淡入淡出之前。

应该发生的是：点击进行，点击幻灯片，＃mainGraphic几乎消失，被替换，然后淡化。

实际上，我点击，制作幻灯片，然后#mainGraphic被替换，然后淡入/淡出。

看来.attr更改会更加褪色？

Answer 1

.attr()更改不是FX队列的一部分，因此它们与效果异步发生。

一种选择是在.attr()回调中调用.fadeTo()更改。

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