web-dev-qa-db-fra.com

Ajouter une transition en changeant img src avec javascript

J'ai une balise img que je veux changer de src en survol et tout fonctionne, mais j'aimerais ajouter une transition afin qu'elle n'ait pas l'air si difficile, mais comme c'est un img src, je ne peux pas la cibler avec 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);
}
javascripttransitionsrc
16
ernerock

Vous voulez un fondu enchaîné. Fondamentalement, vous devez positionner les deux images l'une sur l'autre et définir la valeur opacity sur 0 afin qu'elle soit masquée:

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

Avec un transition défini pour opacity sur les images, tout ce que nous avons à faire est de le déclencher avec ce script:

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

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

6
Mister Epic

Voici une solution css pure utilisant css transition. Vous pouvez utiliser div comme conteneur et définir le background-image en survol.

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

3
brian17han

Juste au cas où quelqu'un serait curieux de savoir comment créer un effet de transition lorsque vous modifiez l'attribut source d'une image, c'est la solution que j'ai proposée.

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

Cela donnera l'illusion de "fondu au noir et au noir" entre les images - même si vous utilisez quelque chose comme parallax.js où vous avez un composant piloté par un attribut de données qui rend en une image dynamique. J'espère que ça aide quelqu'un.

0
Grant