.delegate img src= and fading

I have this function.

$('.anythingSlider').delegate('img','click', function(){
  $('#largeIm开发者_如何学编程age').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

Try this

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

});

You need to use the callback functionality of the fadeIn/Out methods.

$('.anythingSlider').delegate('img','click', function(){
    var newImg = $(this).data('image');  // the data- attributes can be accessed directly with the .data() method
    $('#largeImage').fadeOut('normal', function(){
        $(this).attr('src',newImg); // set the src attribute to the new one
    });
});

// set the fadeIn to happen on the .load event of the image so that it does not fade in while loading..
$('#largeImage').load(function(){
    $(this).fadeIn('normal'); 
});

Demo at http://jsfiddle.net/gaby/33P4F/