Performance-friendly blinking effect

Question

I'd love to add a blinking effect like this, but I think setInterval is overkill for what's mere cosmetic stuff:

jQuery(function(){
  $("#watch").each(function(){
    var $box = $(this);
    var show = true;
    setInterval(function(){
      var m = moment();
      $box.text(show ? m.format('H:mm') : m.format('H mm'));
      show = !show;
    }, 500);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js'></script>
<div id="watch">--:--</div>

Is there a newer JavaScript API I could be using, or maybe a CSS transition?

You mean something like [this](http://stackoverflow.com/questions/16344354/how-to-make-blinking-flashing-text-with-css3) I'd imagine you'd have to wrap the `:` in a span tag to achieve it though. — George, Apr 21 '17 at 10:38
I think that it would be better to simply apply the animation using CSS and use jQuery to remove it for certain events in this case. — Tanasos, Apr 21 '17 at 10:40

score 1 · Accepted Answer · edited May 23 '17 at 12:34

1

Using the CSS provided by this answer, you can do this

jQuery(function() {
  $("#watch").each(function() {
    var $box = $(this);
    setInterval(function() {
      var m = moment();
      $box.html(m.format('H') + '<span class="blink_me">:</span>' + m.format('mm'));
    }, 1000);

  });
});

.blink_me {
  animation: blinker 1s infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js'></script>
<div id="watch">--:--</div>

edited May 23 '17 at 12:34

Community

1
1

answered Apr 21 '17 at 10:43

George

6,630
2
29
36

but time display never changes – charlietfl Apr 21 '17 at 10:45
@charlietfl fixed, don't know why I removed the `setInterval` – George Apr 21 '17 at 10:46

score 1 · Answer 2 · edited May 23 '17 at 12:26

1

For the records, this is the final CSS I wrote based on George's answer:

section {
  font-size: 5rem;
}

.stop-watch span {
   animation: blink 1s infinite;
}

@keyframes blink{
  0% {
    animation-timing-function: steps(1, end);
    opacity: 1;
  }
  50% {
    animation-timing-function: steps(1, end);
    opacity: 0;
  }
}

<section class="stop-watch">
1<span>:</span>59
</section>

edited May 23 '17 at 12:26

Community

1
1

answered May 19 '17 at 08:20

Álvaro González

142,137
41
261
360

Performance-friendly blinking effect

2 Answers2