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/

修复＆＃34;真正快速徘徊＆＃34;在这里。

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

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

最后：

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

为此jquery函数添加延迟

2 个答案: