.delegate img src = and褪色

Question

我有這個功能。

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

我想img淡出/當拇指被點擊和img src交換。

我已經試過

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

但在此之前它的圖片src互換淡出。有沒有辦法鏈接這個淡出 - > img src swap - >淡入？任何幫助，將不勝感激。

感謝， 邁克爾

Answer 1

試試這個

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

}); 

Answer 2

您需要使用的淡入/出方法的回調功能。

$('.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'); 
}); 

演示在http://jsfiddle.net/gaby/33P4F/