向此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);
});

但我不确定，这是否在该函数的正确上下文中。

更新： http://jsfiddle.net/dehisok/X8ycM/1/

修复“真正快速悬停”的方法在这里。

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

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

最后：

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