Search code examples
jquerygalleryswapdelegation

.delegate img src= and fading

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

Solution

  • Try this

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

});