Question

I have this function.

$('.anythingSlider').delegate('img','click', function(){
  $('#largeImage').attr('src',$(this).attr('data-image'));
}); 

I would like to have the img fade out/in when the thumb is clicked and the img src is swapped.

I’ve tried

$('.anythingSlider').delegate('img','click', function(){
  $('#largeImage').animate({opacity:0});
  $('#largeImage').attr('src',$(this).attr('data-image'));
  $('#largeImage').animate({opacity:1});
});

but the image src swaps before it fading out. Is there a way to chain this fade out-> img src swap -> fade in? Any help would be appreciated.

Thanks,
Michael

Answer 1

Try this

$('.anythingSlider').delegate('img','click', function(){
  $('#largeImage').fadeOut(500, function(){
     $(this).attr('src',$(this).attr('data-image')).fadeIn(500);
  });

});