So I have a function that I'm trying to create the loops through an array to update a div's innerHTML with JavaScript. I was hoping to set the opacity to 0 and then 1 between setting the new data each time, without using jQuery's fadeIn() and fadeOut().

Here is what I have so far. I think I'm very close, but not sure what I'm doing that's slightly off.

Thanks!

 slide(index, tweets, element) {
    let self = this;

    element.innerHTML = data[index].text;
    element.style.opacity = 1;

    setTimeout(() => {
        index++;
        element.style.opacity = 0;
        setTimeout(self.slide(index, data, element), 2000);
    }, 5000);
}

EDIT I forgot to mention I'm banking on CSS3 for animation by adding a class to my div that changes with this:

transition: opacity 2s ease-in-out;

So I have a function that I'm trying to create the loops through an array to update a div's innerHTML with JavaScript. I was hoping to set the opacity to 0 and then 1 between setting the new data each time, without using jQuery's fadeIn() and fadeOut().

Here is what I have so far. I think I'm very close, but not sure what I'm doing that's slightly off.

Thanks!

 slide(index, tweets, element) {
    let self = this;

    element.innerHTML = data[index].text;
    element.style.opacity = 1;

    setTimeout(() => {
        index++;
        element.style.opacity = 0;
        setTimeout(self.slide(index, data, element), 2000);
    }, 5000);
}

EDIT I forgot to mention I'm banking on CSS3 for animation by adding a class to my div that changes with this:

transition: opacity 2s ease-in-out;

• javascript
• css

Share Improve this question Follow edited Nov 8, 2015 at 3:37 Felix Kling 818k181181 gold badges1.1k1.1k silver badges1.2k1.2k bronze badges asked Nov 8, 2015 at 0:55 eightonroseeightonrose 68833 gold badges1414 silver badges2424 bronze badges 2

• Is there a reason you don't use CSS 3 for this? Since you specified ES6, I assume you're targeting modern browsers. – user1106925 Commented Nov 8, 2015 at 0:57
• I am using CSS3. Sorry, I didn't specify that. I'm using a 'transition: opacity 2s ease-in-out;', but I can't for the life of me figure out how to trigger it before and after setting the innerHTML. – eightonrose Commented Nov 8, 2015 at 0:59

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

I don't know how the code you provided relates to the problem at hand, but here's a simple demo on how to fade out, change the text and then fade back in.

You should be able to expand on this for your needs.

var d = document.querySelector("div");

window.addEventListener("load", function() {
  d.classList.add("hidden");
});

var i = 0;

d.addEventListener("transitionend", function() {
  if (this.classList.contains("hidden")) {
    i++;
    this.innerHTML = "SUCCESS! ---> " + i;
  }
  this.classList.toggle("hidden");
});

div {
  opacity: 1;
  transition: opacity 2s;
}

div.hidden {
  opacity: 0;
}

<div>LOADING...</div>

It just adds the hidden class to trigger the fade out and it binds a transitionend handler to change the text and remove the class for the fade in.