Reputation: 9319
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
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