爲此jQuery功能添加延遲

Question

我正在使用jquery交換img src。有什麼方法可以添加淡入淡出效果，以便圖像淡入淡出而不是直接交換？

歡呼

<img class="imgswap" data-alt-src="img1.jpg" src="img2.jpg" /> 
var sourceSwap = function() { 
    var $this = $(this); 
    var newSource = $this.data('alt-src'); 
    $this.data('alt-src', $this.attr('src')); 
    $this.attr('src', newSource); 
} 

$(function() { 
    $('img.imgswap').hover(sourceSwap, sourceSwap); 
}); 

Answer 1

您可以使用以下功能：

.mouseover(function() { 
    $(this).fadeOut(function(){ 
     //do the swapping 
     $(this).fadeIn(); 
    }); 
}) 

Answer 2

<img class="imgswap" data-alt-src="img1.jpg" src="img2.jpg" /> 

var sourceSwap = function() { 
    var newSource = $(this).data('alt-src'); 

    $(this).fadeOut(function(){ 
     $(this).data('alt-src', $(this).attr('src')); 
     $(this).attr('src', newSource); 

     $(this).fadeIn(); 
    }); 
} 

$(function() { 
    $('img.imgswap').mouseover(sourceSwap); 
}); 

但我不知道，這將是在該函數正確的上下文中。

UPD：http://jsfiddle.net/dehisok/X8ycM/1/

的 「真快徘徊在」 修復是在這裏。

if ($(this).hasClass('processing')) { 
    return; 
} 

$(this).addClass('processing'); 

而在最後：

$(this).removeClass('processing');