0

i have a div-container with a gif-picture. I want to blinking this gif, but the gif is only show and is not blinking

  function blink() {
      time2 = time2 - 1;
      if (time2 >= 0) {
          var ani = setInterval(blinkerle() {
              if (document.getElementById(risiko1).style.visibility == "visible") {
                  document.getElementById(risiko1).style.visibility = "hidden";
              } else {
                  document.getElementById(risiko1).style.visibility = "visible";
              }
          }, 1000);

      }
  }

the function is called via blink();

from another place. thanks for your help

Lucas
  • 9,871
  • 5
  • 42
  • 52

2 Answers2

0

You can actually do this with pure CSS:

div {
  display: block;
  position: relative;
  top: 5px;
  width: 200px;
  height: 50px;
  background-image: url("http://cdn.sstatic.net/stackoverflow/img/sprites.png");
  background-position: top left;
  background-repeat: no-repeat;
  text-indent: -999em;
}
/** the blink css is below this comment: **/
.blink {
  animation: blink-animation 1s steps(5, start) infinite;
  -webkit-animation: blink-animation 1s steps(5, start) infinite;
}
@keyframes blink-animation {
  to {
    visibility: hidden;
  }
}
@-webkit-keyframes blink-animation {
  to {
    visibility: hidden;
  }
}
<div class="blink"></div>

CSS taken from here.

Community
  • 1
  • 1
jperezov
  • 3,041
  • 1
  • 20
  • 36
0

You're missing the function keyword in front of the blinkerle() function. It should be:

 var ani = setInterval(function blinkerle(){ 

Or preferably use an anonymous function:

 var ani = setInterval(function() { 
rgvassar
  • 5,635
  • 1
  • 24
  • 31