fadeOut结束后正在执行jQuery的fadeOut回调函数答案

【问题标题】：JQuery fadeOut callback function is being executed after fadeOut is overfadeOut结束后正在执行jQuery的fadeOut回调函数
【发布时间】：2013-07-01 20:43:38
【问题描述】：

单击按钮时，我正在尝试淡出图像，并且在淡出时我正在更改图像的来源。然后我使用淡入淡出来显示新图像。这在 Chrome 和 Firefox 中运行良好。但是在ie10中，图像淡出，淡入，然后出现新的图像。我找不到解决办法。我试图延长淡出淡入的持续时间。我试过使用 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')

【问题讨论】：

这是因为图片没有加载吗？尝试在您的页面中显示第二张图片的 img 标签，只是为了测试它..
在淡出功能中也不需要me.$el.find('#printable-detail-static-imageRight')。使用$(this)

标签： javascript jquery jquery-ui

【解决方案1】：

我很确定您需要将.fadeIn 方法放在回调函数中，以便它受到回调函数的影响。实际上，我会在 .attr 方法中添加另一个回调函数，以确保它仅在 src 更改后才淡入。

Here's 我写的一个 jsFiddle 来说明我的意思。

【讨论】：

@Turtleweezard ...此代码适用于其他浏览器，但适用于 ie。即仍然淡出，淡入然后图像正在改变。在 chrome 和 firefox 上，它可以完美运行。
当。我真希望我对 jQuery 有足够的了解来解决这个问题……“该死的 Internet Explorer！！！”

【解决方案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);
        }
    });
});

【讨论】：

但是当您尝试更改图像的 src 属性时它会起作用吗？
在这种情况下，我赞成这个解决方案。 +1
淡出淡入，但画面不变。
@rusln 这段代码在 ie 中工作，但它给了我和以前一样的问题。即，当前图片淡出，与当前图片一起淡入几分之一秒，然后图像发生变化

【解决方案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);
                            }
                        }
                    });

【讨论】：