CODEWITHSUNDEEP
javascriptjqueryjquery-ui
user1801879
user1801879

Reputation: 822

JQuery fadeOut callback function is being executed after fadeOut is over

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

Upvotes: 1

Views: 1012

Answers (3)

user1801879
user1801879

Reputation: 822

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

Upvotes: 0

rusln
rusln

Reputation: 1284

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

Upvotes: 1

Turtleweezard
Turtleweezard

Reputation: 175

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.

Upvotes: 1

Related Questions