javascript 的图像转换

Question

我有一个图片标签，可以在悬停时更改图片。我想让这个过渡顺利。有点像淡入下一个图像。这是我现在的代码：

$('img').bind('mouseenter mouseleave', function() {
    $(this).attr({
        src: $(this).attr('data-other-src') 
        , 'data-other-src': $(this).attr('src') 
    })
});

我是 javascript

的初学者

Answer 1

更改 faster/slower 过渡的 ms 值，淡出然后返回

$('img').bind('mouseenter mouseleave', function() {
  var self = $(this);
  self.fadeTo(1000, 0.30, function() {
    self.attr({
      src: self.attr('data-other-src'),
      'data-other-src': self.attr('src')
    });
  }).fadeTo(500, 1);
});

Answer 2

替换 src 属性是 "brutal"：您无法转换它。

为此，您需要至少在转换期间 DOM 中存在 2 张图像。

javascript 的图像转换

image transition for javascript

javascript

jquery

transition

smooth