JQuery fadeOut callback function is being executed after fadeOut is over

1
votes

On a click of a button, i'm trying to fadeOut an image, and while it is fading out i'm changing the source of the image. And then i'm using the fadeIn to show the new image. This works fine in Chrome, and firefox. However, in ie10, the image fades out, fades in, and then the new image appears. I can't find a a fix for it. I've tried to prolong the duration of fadeOut, fadeIn. I've tried using setTimeout function. i've tried using promise().done() function. I've tried using Jquery UI's hide/show w/ slide effect, and same issues are appearing. Nothing seems to be working. I'd really appreciate any help. Thanks

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')
3
javascriptjqueryjquery-ui
is this because the image isn't loaded? try having the an img tag in your page showing the second image, just to test it.. – rorypicko
also you don't need me.$el.find('#printable-detail-static-imageRight') within the fade out function. use $(this) – rorypicko

3 Answers

1
votes

I'm pretty sure you need to put the .fadeIn method inside the callback function in order for it to be affected by the callback function. In fact, I'd add another callback function to the .attr method to make sure that it fades back in only after the src has been changed.

Here's a jsFiddle I wrote to illustrate what I mean.

1
votes

i am on a mac, but does this code works in 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);
        }
    });
});
0
votes

this works:

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