javascript - 如何淡化图像 src 属性？

Question

我发现可以这样做:

$(".topImage img")
        .mouseover(function() { 
            var src = $(this).attr("src").match(/[^\.]+/) + "-bw.png";
            $(this).fadeOut("fast").attr("src", src).fadeIn("fast");
        })
        .mouseout(function() {
            var src = $(this).attr("src").replace("-bw.png", ".png");                
            $(this).fadeOut("fast").attr("src", src).fadeIn("fast");
        });
    });

但这使它变得很糟糕，因为它完全淡化了之前的 src。有没有一种方法可以转换 src 更改，这样就不会出现“在新 src 加载之前现在是白色背景”？

编辑

<div class="topImage">
    <img src="<?=$img[0]?>">
</div>

这是它必须保留的方式 - topImage 容器中只有一个图像，因此不能选择改变不透明度的两个图像。

Answer 1

你甚至可以完全不用 JS。有很多方法可以做到这一点，但这里有一个:http://codepen.io/mbrillaud/pen/MwwgWZ

HTML

<div class="container">
  <img src="//lorempicsum.com/futurama/350/200/2" alt="" />
  <img src="//lorempicsum.com/futurama/350/200/1" alt="" />
</div>

CSS

.container {
  position: relative;
}

.container img {
  position: absolute;
  top: 0;
  left: 0;
  transition: opacity 0.5s;
}
.container img:last-child:hover{
  opacity: 0;
}