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

Question

I have an img tag that I want to change the src when hover and it all works but i would like to add some transition so it doesn't look so rough but since it's an img src i cant target it with 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

You want a crossfade. Basically you need to position both images on top of each other, and set one's opacity to 0 so that it will be hidden:

<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;
}

With a transition set for opacity on the images, all we need to do is trigger it with this script:

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

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

Answer 2

Here is a pure css solution using css transition . You can use a div as the container and set the background-image on hover.

 .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>

Answer 3

Just in case someone is curious how to actually create a transition-like effect when you are actually changing the source attribute of an image, this was the solution I came up with.

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;
}

This will give the illusion of 'fading to black and back' between images - even if you're using something like parallax.js where you have a data-attribute driven component that renders out into a dynamic image. Hope it helps someone.

Answer 4

Fixed Mister Epic solution's images in this 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');
    });
});

Answer 5

i usually use jquery for this.

$(document).on("mouseover", '.image_class', function () {
        $(this).attr('src', 'img/img2.jpg');
    });

$(document).on("mouseout", '.image_class', function () {
        $(this).attr('src', 'img/img1.jpg');
  });