How to fade a loop with JavaScript?

user_12843889 0
Viewed 100

I am trying to do an Ad banner (loop banner) with JavaScript. I want the first image to have fade and other no, seem it work with me but when second loop start (and next ones) the first image loose its fade effect. What's wrong with my code?

function displayAd2() {
  setTimeout(() => {
    element = document.querySelector("#ad_container2");
    element.style.backgroundImage = "http://via.placeholder.com/150)";
    element.style.opacity = "1";
    element.style.transition = "2s ease-in-out";
    setTimeout(() => {
      element = document.querySelector("#ad_container2");
      element.style.backgroundImage = "http://via.placeholder.com/150";
      element.style.opacity = "1";
      element.style.transition = "0s ease-in-out";
      setTimeout(() => {
        element = document.querySelector("#ad_container2");
        element.style.backgroundImage = "http://via.placeholder.com/150";
        element.style.opacity = "1";
        element.style.transition = "0s ease-in-out";
        setTimeout(() => {
          displayAd2();
        }, 2500);
      }, 2000);
    }, 100);
  }, 100);
}
displayAd2();
#bg2 {
  width: 728px;
  height: 90px;
  margin-top: 40px;
  background-color: #0c74b9;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

#ad_container2 {
  position: absolute;
  width: 100%;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
  opacity: 0;
}
<div id="bg2">
  <div id="ad_container2"></div>
</div>

I have total 8 svg files no issue if you provide a better code than this.

css html javascript
1 Answers

Okay, I think I got it working the way you want. First of all, you don't need multiple assignments to element as it always selects the same element. Instead you can just select it outside of the function: 

const element = document.querySelector("#ad_container2");

The rest of the code is okay, but has 2 problems (listed A and B below):

A. The syntax for element.style.backgroundImage is wrong. To use an URL for the image-background property, you need to wrap it in "URL(image-link-here)". So in your case, you need to change it to:

element.style.backgroundImage = "url('http://via.placeholder.com/150')";

//Note the use of double quotation marks ("") for the outside string and single quotation marks ('') for the inside image-url.

B. Your setTimeout times are off. 

function displayAd2() {
  setTimeout(() => {

    element.style.backgroundImage = "http://via.placeholder.com/150)";
    element.style.opacity = "1";
    element.style.transition = "2s ease-in-out";
    setTimeout(() => {

      element.style.backgroundImage = "http://via.placeholder.com/150";
      element.style.opacity = "1";
      element.style.transition = "0s ease-in-out";
      setTimeout(() => {

        element.style.backgroundImage = "http://via.placeholder.com/150";
        element.style.opacity = "1";
        element.style.transition = "0s ease-in-out";
        setTimeout(() => {
          displayAd2();
        }, 2500); //FOURTH triggers 2500ms after THRID and the function runs again from FIRST
      }, 2000); //THIRD starts 2000ms after SECOND, this part is okay
    }, 100); // SECOND part of the function will also start 100ms after the FIRST 
//started, i.e. not giving enough time for the first transition of 2 seconds to take place
  }, 100); //FIRST, the initial function will start 100ms after pageload
}

Another note is to have different images to better visualise the changes happening - in your code example, all background images are the same, so even if there was a transition you wouldn't see it happening! Here is how I would set it up:

const element = document.querySelector("#ad_container2");
function displayAd2() {
  setTimeout(() => {

        element.style.transition = "2s ease-in-out";
    element.style.backgroundImage = "url('http://via.placeholder.com/250')";
    element.style.opacity = "1";

    setTimeout(() => {

      element.style.backgroundImage = "url('https://cdn.pixabay.com/photo/2017/0    8/30/01/05/milky-way-2695569_960_720.jpg')";
      element.style.opacity = "1";
      element.style.transition = "none";

      setTimeout(() => {

        element.style.transition = "none";
        element.style.backgroundImage = "url('http://via.placeholder.com/150')";
        element.style.opacity = "1";

        setTimeout(() => {
          displayAd2();
        }, 2000); //allow 2s for each image
      }, 2000);
    }, 2000);
  }, 0);
}

displayAd2();

And the JSfiddle link to see it running: JSfiddle Link

user_129155880
Related