wake-up-neo.com

Fügen Sie Übergang hinzu, während Sie img src mit Javascript ändern

Ich habe ein img-Tag, an dem ich die src ändern möchte, wenn hover und alles funktioniert, aber ich würde gerne einige Übergänge hinzufügen, damit es nicht so grob aussieht. 

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

Sie wollen eine Überblendung. Grundsätzlich müssen Sie beide Bilder übereinander positionieren und die opacity auf 0 setzen, damit sie ausgeblendet wird:

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

Wenn eine transition für opacity in den Bildern festgelegt ist, müssen wir sie nur mit diesem Skript auslösen:

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

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

6
Mister Epic

Hier ist eine reine css-Lösung, die css transition verwendet. Sie können eine div als Container verwenden und den background-image für den Hover setzen.

.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

Nur für den Fall, dass jemand neugierig ist, wie er einen Übergangseffekt erzeugen kann, wenn Sie das Quellattribut eines Bildes ändern, war dies die Lösung, die ich gefunden habe.

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

Dadurch entsteht die Illusion, zwischen Bildern zu Schwarz und zurück zu verblassen - selbst wenn Sie so etwas wie parallax.js verwenden, bei dem Sie eine datenattributgesteuerte Komponente haben, die ein dynamisches Bild ergibt. Hoffe es hilft jemandem.

0
Grant