Question

我有这个功能。

$('.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在淡出之前交换。有没有办法将这种淡出效果链接起来＆gt; img src swap - ＆gt;淡入？任何帮助将不胜感激。

谢谢，迈克尔

Answer 1

试试这个

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

});

Answer 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/

演示

.delegate img src =和褪色

2 个答案: