Adding fade-in to javascript timer

Question

In my html body I am using a javascript that writes and changes a line of text in my div, with ID "moto", every 5 seconds.

    var text = ["TEXT 1","TEXT 2","TEXT 3","TEXT 4"];
    var counter = 0;
    var elem = document.getElementById("moto");
    ChangeFunction();
    setInterval(ChangeFunction, 5000);
    
    function ChangeFunction() {
        elem.innerHTML = text[counter];
        counter++;
        if(counter >= text.length) { counter = 0; }
    }

    #moto{
      -webkit-transition: all 1s ease-in-out;
      -moz-transition: all 1s ease-in-out;
      -o-transition: all 1s ease-in-out;
      transition: all 1s ease-in-out;
    }

<div id="moto"></div>

Do I need to apply some java fade-in fade-out? I would rather use CSS...

You will have to write a css class with fade-in and fadeOut styles and then toggle these classes on the element In the interval .. — Rajshekar Reddy
– Rajshekar Reddy, Commented Nov 5, 2016 at 12:49
Yes you will need to use Javascript for this. If you simply change innerHTML there's nothing to fade. You first fade out the oldtext, then put the newtext in, then fade it in. (note: Javascript has nothing to do with Java despite the name similarity) — tmslnz
– tmslnz, Commented Nov 5, 2016 at 12:49

Aruna · Accepted Answer · 2016-11-05 12:56:10Z

1

You can use jquery to do this easily as below

var text = ["TEXT 1","TEXT 2","TEXT 3","TEXT 4"];
var counter = 0;
var elem = document.getElementById("moto");
ChangeFunction();
setInterval(ChangeFunction, 5000);

function ChangeFunction() {
    var moto = text[counter++];
    $(elem).fadeOut('slow', function() {
      $(elem).html(moto);
      $(elem).fadeIn('slow');
    });

    if(counter >= text.length) { counter = 0; }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="moto"></div>

answered Nov 5, 2016 at 12:56

Aruna

12k3 gold badges31 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

71GA Over a year ago

This doesn't work for me on my PC. Do JQuerry need to be installed first in order for my PC to work with this code?

Aruna Over a year ago

@71GA, you can link the jquery from the CDN as I mentioned above. Just place the script tag inside <head></head>

Aruna Over a year ago

Otherwise, you can download it locally and refer to the local version

71GA Over a year ago

One more question. On page load text is nonexistent for some time and it then starts to render. When this happens the entire page below the text is moved downwards. Is there any way to prevent this?

Aruna Over a year ago

It's because, the method ChangeFunction(); is called on the page load. You can remove this and just keep the setInterval(ChangeFunction, 5000); there only.

Michał Perłakowski · Accepted Answer · 2016-11-05 13:01:40Z

1

You don't need JavaScript at all. Here's a pure CSS implementation:

@keyframes fade {
  0% {
    opacity: 1;
  }
  50%, 100% {
    opacity: 0;
  }
}
#moto {
  position: relative;
}
#moto div {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  animation: fade 4s 0s infinite alternate-reverse;
}
#moto :nth-child(1) {
  animation-delay: -2s;
}
#moto :nth-child(2) {
  animation-delay: 0s;
}
#moto :nth-child(3) {
  animation-delay: 2s;
}
#moto :nth-child(4) {
  animation-delay: 4s;
}

<div id="moto">
  <div>TEXT 1</div>
  <div>TEXT 2</div>
  <div>TEXT 3</div>
  <div>TEXT 4</div>
</div>

answered Nov 5, 2016 at 13:01

Michał Perłakowski

93.3k30 gold badges165 silver badges189 bronze badges

8 Comments

tmslnz Over a year ago

This assumes pre-exiting markup, which according to OP is not there (they are setting innerHTML). But neat trick the negative delay!

Michał Perłakowski Over a year ago

@tmslnz If there's no pre-existing markup, the CSS can be generated using JavaScript.

tmslnz Over a year ago

Yeah, but then it would be a bit of a roundabout way to go at it, wouldn't it?

Michał Perłakowski Over a year ago

@tmslnz Maybe it would be a bit more complicated, but the performance would be better than when changing innerHTML.

Michał Perłakowski Over a year ago

@71GA 4s is the duration of the animation, and 0s is the delay.

|

Collectives™ on Stack Overflow

Adding fade-in to javascript timer

2 Answers 2

5 Comments

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related