使用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');">

JavaScript

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

- ernerock

---

你可能无法无缝地从一张图像平滑过渡到另一张图像（当您改变src时会立即发生），但是您可以使用一些CSS转换淡出、设置src和淡入。 - adv12

你可以在 div 标签上使用 CSS 的 background-image。然后你需要两个 div，一个覆盖另一个（将它们包裹在一个父级 div 中，两个子元素都绝对定位于 left: top: 0:0）。然后你可以在 opacity 上使用 transition（以实现平滑过渡效果）。 - try-catch-finally

Answer 1

这里有一个纯CSS的解决方案，使用CSS transition。您可以使用 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>

- brian17han

Answer 2

您希望进行淡入淡出效果。基本上，您需要将两张图片叠放在一起，并将其中一个图片的opacity属性设置为0，以便它将被隐藏：

<div id="container">
    <img class="hidden image1" src="http://www.istockphoto.com/file_thumbview_approve/4629609/2/istockphoto_4629609-green-field.jpg">

    <img class="image2" src="http://www.istockphoto.com/file_thumbview_approve/9958532/2/istockphoto_9958532-sun-and-clouds.jpg" />
</div>

CSS：

.hidden{
 opacity:0;   
}

img{
    position:absolute;
    opacity:1;
    transition:opacity 0.5s linear;
}

通过在图像上设置 opacity 的 transition，我们只需要使用此脚本来触发它：

$(function(){
    debugger;
    $(document).on('mouseenter', '#hoverMe', function(){
        $('img').toggleClass('hidden');
    });
});

http://jsfiddle.net/Ne5zw/12/

- Mister Epic

---

琴弦断了，需要修复图片。 - ey dee ey em

Answer 3

如果有人好奇如何在实际更改图像源属性时创建类似过渡效果，这是我想出的解决方案。

JavaScript:

        var bool = false;
        setInterval(() => {
            bool = !bool;
            let imgSrc = bool ? 'hero-bg2.jpg' : 'hero-bg.jpg'; // Toggle image
            $('.parallax-slider').addClass('transitioning-src'); // Add class to begin transition
            setTimeout(() => {
                $('.parallax-slider').attr('src', `https://website.com/images/${imgSrc}`).removeClass('transitioning-src');
            }, 400); // Ensure timeout matches transition time, remove transition class
        }, 6000);

CSS：

.parallax-slider {
    transition: opacity 0.4s ease-in;
    -webkit-transition: opacity 0.4s ease-in;
    -moz-transition: opacity 0.4s ease-in;
    -ms-transition: opacity 0.4s ease-in;
    -o-transition: opacity 0.4s ease-in;
    opacity: 1;
}
.transitioning-src {
    transition: opacity 0.4s ease-out;
    -webkit-transition: opacity 0.4s ease-out;
    -moz-transition: opacity 0.4s ease-out;
    -ms-transition: opacity 0.4s ease-out;
    -o-transition: opacity 0.4s ease-out;
    opacity: 0;
}

这将产生在图像之间“淡入淡出”的幻觉 - 即使你正在使用像parallax.js这样的数据驱动组件，它会呈现为动态图像。希望能帮到某些人。

- Grant

---

你能告诉我如何添加转场效果，就像Instagram直播故事一样（当我们向右滑动到不同的直播故事时）？谢谢。 - user1788736

Answer 4

修复了Mister Epic solution's在这个jsfiddle中的图片。

HTML

<div id="container">
  <img class="hidden image1" src="http://placeholder.pics/svg/300x300/DEDEDE/555555/Old%20Image">
  <img class="image2" src="http://placeholder.pics/svg/300x300/DEDEDE/555555/New%20Image" />
</div>
 <div id="hoverMe">hover me</div>

CSS

    div#hoverMe {
    background-color:yellow;
    width:50px;
    height:50px;
    position:fixed;
    top:300px;
}

div#container{
   position:relative;
    height:200px;
}

.hidden{
 opacity:0;   
}

img{
    position:absolute;
    opacity:1;
    transition:opacity 0.5s linear;
}

JS

$(function(){
    $(document).on('mouseenter', '#hoverMe', function(){
        $('img').toggleClass('hidden');
    });
});

- Alejandro Akbal