> Extremely new to jQuery so I am sure this is an easy fix for some of
> you advanced players out there. Thanks in advance.
>
> Creating a photo gallery and want the currently displayed image to
> fade away before the new image fades in...this is the code I have thus
> far.
>
> $("#imageSelect li a").click(function(){
> var imagePath = $(this).attr("href");
> $("#mainImg img").animate({opacity: "hide"}, 500).attr({ src:
> imagePath }).animate({opacity: "show"}, 500);
> return false;
> });
>
> The main issue is that the new image is grabbed and displayed before
> the hide animation can complete, so you see it right away, then it
> fades away...and then reappears a half second later. Any suggestions?
>
The key is the delay the fadeIn until the fadeOut has completed. You
do that by using a callback method. Note that I switched from animate
to fadeIn/Out for simplicity:
$("#imageSelect li a").click(function() {
var imagePath = $(this).attr("href");
// pass callback to fadeOut
$("#mainImg img").fadeOut(500, function() {
$(this).attr('src', imagePath).fadeIn(500);
});
return false;
});
