.delegate img src= 和淡入淡出答案

【问题标题】：.delegate img src= and fading.delegate img src= 和淡入淡出
【发布时间】：2011-10-18 13:33:15
【问题描述】：

我有这个功能。

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

我希望在单击拇指并交换 img src 时让 img 淡出/淡入。

我试过了

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

但图像 src 在淡出之前会交换。有没有办法链接这个淡出-> img src swap -> 淡入？任何帮助将不胜感激。

谢谢，迈克尔

【问题讨论】：

标签： jquery gallery swap delegation

【解决方案1】：

试试这个

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

});

【讨论】：

【解决方案2】：

您需要使用fadeIn/Out 方法的回调功能。

$('.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/的演示

【讨论】：