Is it possible to make the if statement change one img to another slowly?

Question

This is a simple JS function: onclick will check certain divs and replace the images in these divs.

My question: Can I regulate the transition time between the images using only JS ?

Thank you!

function menu() {
    if (document.getElementById("contactus").getAttribute('src') ==
        "images/mainpage/image1.png") {
        document.getElementById("contactus").src =
            "images/mainpage/image2.png";
    }
}

perhaps this thread would help. https://stackoverflow.com/questions/23583245/add-transition-while-changing-img-src-with-javascript — JkAlombro, May 02 '19 at 06:17
You can probably try using CSS transition property. That will allow you to simply adjust the effect using CSS without modifying your current javascript code. — jitendragarg, May 02 '19 at 06:23
As per the @JkAlombro 's suggested link, this is possible through the jquery `toggelClass` like http://jsfiddle.net/0nf8x1r2/ — Kirankumar Dafda, May 02 '19 at 06:37

score 1 · Answer 1 · answered May 02 '19 at 06:28

No, this can't be done if you change the src attribute. There are however other ways to do this. You can use two image elements on to of each other and animate the opacity css property, or you can create a div and set the background-image property.

function changeImage1() {
  var img = document.getElementById("myimg1")
  img.style.opacity = 0;
}

function changeImage2() {
  var img = document.getElementById("myimg2")
  img.style.backgroundImage = 'url("https://cdn.vox-cdn.com/uploads/chorus_asset/file/10675351/The_Verge_Cubeometry_Wallpaper_Portrait.0.png")'
}

#imgContainer {
  position: relative;
}

#myimg1 {
  transition: opacity 5s;
  position: absolute;
  top: 0;
  left: 0;
}

#myimg2 {
  background-image: url("https://cdn.vox-cdn.com/uploads/chorus_asset/file/10675417/The_Verge_Singularity_Wallpaper_Portrait.0.png");
  background-size: contain;
  transition: background-image 5s;
  width: 100px;
  height: calc(100px * 3840 / 2160);
}

<h1>Option 1</h1>

<div id="imgContainer">
  <img src="https://cdn.vox-cdn.com/uploads/chorus_asset/file/10675351/The_Verge_Cubeometry_Wallpaper_Portrait.0.png" width="100">
  <img id="myimg1" src="https://cdn.vox-cdn.com/uploads/chorus_asset/file/10675417/The_Verge_Singularity_Wallpaper_Portrait.0.png" width="100">
</div>
<button onclick="changeImage1()">Change</button>

<h1>Option 2<h1>

<div id="myimg2"></div>
<button onclick="changeImage2()">Change</button>

score 0 · Answer 2 · edited May 02 '19 at 08:03

Try this one using jquery fadeIn and fadeOut functions also you can change the delay

$("#link").click(function() {
    $("#image").fadeOut(1000, function() {
        $("#image").attr("src",$("#link").attr("href"));
    }).fadeIn(1000);
    return false;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img id="image" src="http://www.google.com/logos/2011/trevithick11-hp.jpg"/>
<a id="link" href="http://www.google.com/logos/2011/mothersday11-hp.jpg">Change picture</a>

Dilshan · Accepted Answer · 2019-05-02T10:38:15.980

Run this code. I just used 100% pure javaScript due to I have no work to do at this moment :) but If I need functionality like that, I will surely use jquery fadeIn() and fadeOut() methods.( Note : This can be easily done with jquery or with pure css & some 2, 3 lines of JS) :)

<button>click</button>
<div class='imgContainer'><img id='img' src="https://images.unsplash.com/photo-1556757758-bcaf8510b51d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" style="opacity: 1 ; display: block;" alt=""></div>
<script>
 const button = document.querySelector('button');
 const imgContainer = document.querySelector('.imgContainer');

 button.addEventListener('click' , () => {
 const styleAttr = imgContainer.childNodes[0].attributes[2].nodeValue;
 const splitAttr = styleAttr.split(';');
 let opacity = Number(splitAttr[0].split(':')[1]);

 if(opacity > 0){
  let i = opacity
  const interval1 = setInterval(changeImg, 20);
  function changeImg(){
   if( i > 0){
    const newStyle = 'opacity: '+ i + '; display: block';
    imgContainer.childNodes[0].attributes[2].nodeValue = newStyle
    i = i - 0.1;
   }
   if( i < 0){
    clearInterval(interval1);
    i = 0;

    const firstImg = 'https://images.unsplash.com/photo-1556757758-bcaf8510b51d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60'
    const secondImg = 'https://images.unsplash.com/photo-1556644326-3b615a8ebed8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60'

    let currentUrl = imgContainer.childNodes[0].attributes[1].nodeValue 
    if( currentUrl == firstImg ){
     imgContainer.childNodes[0].attributes[1].nodeValue = secondImg
    }
    if( currentUrl == secondImg ){
     imgContainer.childNodes[0].attributes[1].nodeValue = firstImg
    }
          
    const newStyle = 'opacity: 0 ; display: none'
    imgContainer.childNodes[0].attributes[2].nodeValue = newStyle
    const interval2 = setInterval(increaseOpacity, 20); 

    function increaseOpacity(){
     if( i >= 0 && i < 1 ){
      const newStyle = 'opacity: '+ i + '; display: block';
      imgContainer.childNodes[0].attributes[2].nodeValue = newStyle
      i = i + 0.1;
     }
     if( i >= 1 ){
      const newStyle = 'opacity: 1 ; display: block'
      imgContainer.childNodes[0].attributes[2].nodeValue = newStyle
      clearInterval(interval2);
     }
    }
   }      
  }
 }
    })
 </script>

Is it possible to make the if statement change one img to another slowly?

3 Answers3