javascript - 使用 javascript 更改 img src 时添加过渡

Question

我有一个 img 标签，我想在悬停时更改 src，并且一切正常，但我想添加一些过渡，这样它看起来不那么粗糙，但由于它是一个 img src，我无法使用 css 来定位它。

http://jsfiddle.net/Ne5zw/1/

html

<img id="bg" src="img/img1.jpg">
<div onmouseover="imgChange('img/img2.jpg'); "onmouseout="imgChange('img/img1.jpg');">

js

function imgChange(im){
document.getElementById('bg').src=(im);
}

Answer 1

这是一个使用 css transition 的纯 CSS 解决方案。您可以使用 div 作为容器，并在悬停时设置background-image。

.image-container {
  background: url(http://placeholder.pics/svg/300x300/DEDEDE/555555/Old%20Image) center center no-repeat;
  background-size: contain;

  width: 150px;
  height: 150px;

  -webkit-transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}

.image-container:hover {
  background-image: url("http://placeholder.pics/svg/300x300/DEDEDE/555555/New%20Image");
}

<div class="image-container"></div>