jquery - 使用 img src swap 添加淡入淡出

Question

使用图像翻转的备用数据属性，如下所述:Best way to do image rollovers?我不知道如何将淡入淡出添加到 attr 交换中。

基本上，悬停时 img src 会发生变化，效果非常好。但有没有办法让它淡入/淡出呢？

$(function(){
  $('img.rollover').hover(function(){
    var e = $(this);
    e.data('originalSrc', e.attr('src'));
    e.attr('src', e.attr('data-rollover'));
}, function(){
    var e = $(this);
    e.attr('src', e.data('originalSrc'));
}); /* a preloader could easily go here too */ 
});

这里是 Jsfiddle:http://jsfiddle.net/dtPRM/1/

看起来像是 fadeToggle 的情况，但我在几个地方尝试过，但没有成功。

也对第六行的逗号分隔函数感到困惑，尽管它似乎表示不悬停。

谢谢

Answer 1

我只是将元素的不透明度设置为 0，然后更改 img-src，然后将动画设置为不透明度:1

$(function(){
$('img.rollover').hover(function(){
    var e = $(this);
    e.data('originalSrc', e.attr('src'));
    e.css('opacity',0);
    e.attr('src', e.attr('data-rollover'));
    e.animate({"opacity":1},400);
}, function(){
    var e = $(this);
    e.css('opacity',0);
    e.attr('src', e.data('originalSrc'));
    e.animate({"opacity":1},400);
}); /* a preloader could easily go here too */
});

http://jsfiddle.net/dtPRM/51/