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/

Answer 2

这是jsfiddle

为了在鼠标移动时获得淡出效果，我设置了一个fadeout，它有一个回调来改变了源，然后逐渐消失。

e.animate({opacity: 0},1000, function() {
    e.data('originalSrc', e.attr('src'));
    e.attr('src', e.attr('data-rollover'));
    e.animate({opacity: 1},1000);
});

使用img src swap添加淡入淡出

2 个答案: