Javascript 在淡出结束后执行JQuery淡出回调函数

点击一个按钮，我试图淡出一个图像，当它淡出时，我正在改变图像的来源。然后我用fadeIn来显示新的图像。这在Chrome和firefox中运行良好。然而，在ie10中，图像淡出，淡入，然后新图像出现。我找不到解决办法。我试着延长淡出的时间，法丹。我试过使用setTimeout函数。我尝试过使用promise（）.done（）函数。我尝试过使用jQueryUI的隐藏/显示/幻灯片效果，同样的问题也出现了。似乎什么都没用。我真的很感激任何帮助。谢谢

me.$el.find('#printable-detail-static-imageRight').fadeOut('fast', function(){
                            me.$el.find('#printable-detail-static-imageRight').attr('src', me.options.samplePrints[k+i]);
                            me.disableNext();
                        });

                        me.$el.find('#printable-detail-static-imageRight').fadeIn('slow')

---

我很确定，您需要将

.fadeIn

方法放在回调函数中，以使其受回调函数的影响。事实上，我会在

.attr

方法中添加另一个回调函数，以确保只有在

src

更改后，它才会淡入

---

我写了一个JSFIDLE来说明我的意思。

我在mac上，但这段代码在ie中有效吗

.html

承诺
启动动画

.js

$（“单击”）。在（“单击”上，函数（）{
$（“#内容”）.fadeOut({
持续时间：1000，
//动画完成后运行
完成：函数（）{
$（“#content”）.append（$（“”）.addClass（“fakeimg”）；
},
//动画完成后运行+
//它的承诺已经解决了
完成：函数（）{
$（'内容'）.fadeIn（1000）；
}
});
});

这项工作：

 me.$el.find('#printable-detail-static-imageRight').animate({
                        opacity:0
                    }, {
                        duration: 700,
                        step: function(now, fx){
                            if(fx.pos > 0.40 && fx.pos < 0.5){
                                $(this).attr('src', me.options.samplePrints[k+i]);
                                me.disableNext();
                            }
                            if (fx.pos ==1) {
                                $(this).animate({
                                    opacity:1
                                }, 200);
                            }
                        }
                    });

me.$el.find（“#可打印细节静态图像右”）。动画({
不透明度：0
}, {
持续时间：700，
步骤：函数（现在，fx）{
如果（fx.pos>0.40和&fx.pos<0.5）{
$（this.attr（'src'，me.options.samplePrints[k+i]）；
me.disableNext（）；
}
如果（fx.pos==1）{
$（此）。设置动画({
不透明度：1
}, 200);
}
}
});

这是因为图像未加载吗？尝试在页面中使用一个img标记来显示第二个图像，只是为了测试它。另外，您不需要在淡出功能中使用

me.$el.find（“#可打印细节静态图像右”）

。使用

$（此）

@Turtleweezard…此代码适用于其他浏览器，但适用于ie。ie仍会淡出、淡入，然后图像会发生更改。在chrome和firefox上，它工作得非常好。我真希望我对jQuery有足够的了解来解决这个问题。。。“该死的Internet Explorer！！！”但当您试图更改图像的src属性时，它会起作用吗？在这种情况下，我赞成这种解决方案+1它淡出淡入，但画面没有改变。@rusln这段代码在ie中工作，但它给了我与以前相同的问题。在ie中，当前图片淡出，它与当前图片一起淡入，持续几秒钟，然后图像发生变化

$("#click").on("click", function () {
    $('#content').fadeOut({
        duration: 1000,
        // run when the animation is complete
        complete: function () {
            $("#content").append($("<div>").addClass("fakeimg"));
        },
        // run when the animation is complete + 
        //it's promise is resolved
        done: function () {
            $('#content').fadeIn(1000);
        }
    });
});

 me.$el.find('#printable-detail-static-imageRight').animate({
                        opacity:0
                    }, {
                        duration: 700,
                        step: function(now, fx){
                            if(fx.pos > 0.40 && fx.pos < 0.5){
                                $(this).attr('src', me.options.samplePrints[k+i]);
                                me.disableNext();
                            }
                            if (fx.pos ==1) {
                                $(this).animate({
                                    opacity:1
                                }, 200);
                            }
                        }
                    });