-1

I was searching a script to make a div to fade in and out, and found this question fade in and fade out in pure javascript without jquery

User bgoldst gave a nice solution that worked for me. But I would need the fade in-out to run in loop, not just once as stated by bgoldst's code. I'm totally new at JS and don't know how to get it to work, any suggestion?

EDIT: I have found a intermediate solution with Luke's suggestion and Kai's suggestions from Pure JavaScript fade in function

That is

<script type="text/javascript">
    var div = document.getElementById("foo");

    setInterval(function() {
        div.style.transition="opacity 1.5s";
        div.style.opacity=0;
    }, 1500);

    setInterval(function() {
        div.style.transition="opacity 1.5s";
        div.style.opacity=1;
    }, 3005);
</script>

However, the fade in/out effect doesn't have a symmetric behaviour.

Eugene Mihaylin
  • 1,736
  • 3
  • 16
  • 31
b1919676
  • 92
  • 2
  • 8

1 Answers1

0

You can use CSS for that, no Javascript necessary. Just use the CSS animation property (set keyframes if you want, etc), and then set this property:

animation-iteration-count: infinite;

Based on your comment, here is a Pen I made that will do what you want - you'll just have to change the animation from changing background color to making it fade. I hope that helps:

http://codepen.io/lukeschunk/pen/pyPpQO

Luke Schunk
  • 241
  • 2
  • 13
  • Hi Luke, thanks for answering. I was trying with keyframes initially, but I had problems using IE, so, I decided to try with JS. – b1919676 Mar 23 '16 at 20:25
  • You could use the javascript `setInterval` method. This will run something forever on a given interval. You'll want the interval value in milliseconds to match your needs depending on how long your animation is. – Luke Schunk Mar 23 '16 at 20:27
  • @b1919676 see the pen I just linked - I think it will set you on the right track :) – Luke Schunk Mar 23 '16 at 20:31