淡出結束后，將執行jQuery淡出回調函數

Question

在單擊按鈕時，我試圖淡出圖像，而當圖像淡出時，我正在更改圖像的來源。 然后我使用fadeIn來顯示新圖像。 在Chrome和Firefox中都可以正常工作。 但是，在ie10中，圖像逐漸淡出，漸弱，然后出現新圖像。 我找不到解決辦法。 我試圖延長fadeOut，fadeIn的持續時間。 我試過使用setTimeout函數。 我試過使用promise（）。done（）函數。 我嘗試使用Jquery UI的帶幻燈片效果的隱藏/顯示，並且出現了相同的問題。 似乎沒有任何作用。 我真的很感謝您的幫助。 謝謝

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')

Answer 1

我很確定您需要將.fadeIn方法放入回調函數中，以使其受到回調函數的影響。 實際上，我將向.attr方法添加另一個回調函數，以確保僅在src更改后才淡入。

這是我寫的jsFiddle來說明我的意思。

Answer 2

我在Mac上，但是此代碼在ie中有效嗎？ 的jsfiddle

html的

<div id="content">Promises</div>
<button id="click">start animation</button>

.js文件

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

Answer 3

這有效：

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