CODEWITHSUNDEEP
jquery
3D-kreativ
3D-kreativ

Reputation: 9319

FadeOut and fadeIn image not as smooth that I want

I put together at script that change the source of an image. I also tried to use the fade method to fade out the old image and then fade in the new image, but it's not looking that good! I there a way that I can improve the jquery code for a smoother transition?

         // Image gallery
     var lia = $("#buildingGalleryMenu ul li a");
     var mainImage = $("#mainImage");

     lia.bind('click', function() {
     // Fade out current image
     mainImage.fadeOut(500);
     // Change src
     mainImage.attr({src: $(this).attr('href') });
     // Fade in new image
     mainImage.fadeIn(500);
        return false;
    });

Upvotes: 0

Views: 170

Answers (1)

timing
timing

Reputation: 6455

You are fading out and fading in at the same time. You have to fadeIn from inside the fadeOut callback:

// get $(this);
var newImage = $(this); 
// Fade out current image
mainImage.fadeOut(500, function(){
    // callback, animation is finished
    // Change src
    mainImage.attr({src: newImage.attr('href') });
    // Fade in new image
    mainImage.fadeIn(500);
});

TIP: You might also want to start the fadeIn upon mainImage.on('load'), this makes it even better.

Upvotes: 1

Related Questions