如何使用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的我到目前为止，我已经能够得到交换的形象，但我卡住在激发淡入/淡出方法：

$(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); 
});