如何使用HTML5数据属性在悬停时添加淡入/淡出？

Question

我试图掌握如何使用jQuery在悬停时使用html数据属性将图像源更改为第二个图像，并使用fadeOut / fadeIn效果。

看起来像这样：

1. 悬停时，第一张图片淡出。
2. 来自data-alt-src的第二张图片已淡入。
3. 在鼠标输出时，它会从原始src中退回到第一张图像。

这是我到目前为止在DOM中所拥有的内容：

<img class="myimageclass" src="http://www.example.com/path-to/picture.jpg" data-alt-src="http://www.example.com/path-to/picture-alt.jpg" alt="my picture">

有关实施此方法的最佳方法的任何建议吗？

编辑：这是我到目前为止的JavaScript，我已经能够让图像交换，但是我遇到的问题是触发fadeIn / fadeOut方法：

$( document ).ready(function() {
        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.myimgclass').hover(sourceSwap, sourceSwap);
    });
});

Answer 1

$(".myimageclass").hover(function () {

    $(this).fadeOut(2000);
    setTimeout(function () {
        var temp = this.getAttribute("data-src");
        this.setAttribute("data-src", this.src);
        this.src = temp;
        $(this).fadeIn(2000);
    }, 2000);

},

function () {
    $(this).fadeOut(2000);
    setTimeout(function () {
        var temp = this.getAttribute("data-src");
        this.setAttribute("data-src", this.src);
        this.src = temp;
        $(this).fadeIn(2000);
    }, 2000);
});