jquery/css blinking start and stop on demand

Question

my application is heavily dependent on signalr for real time info. requirement is when an event1 from signalr is detected blink a div and then on event 2 stop blinking.

i have implement using fadein/fadeout but getting problems like, very high memory usage and also fadein/fadeout continue to happen even after class i removed.

function blinkcard() {
                $('.blink').fadeOut(500);
                $('.blink').fadeIn(500);
            }
            setInterval(blinkcard, 1000);

Answer 1

Why not use CSS?

$('#t').click(function() {
  $("#blinkdiv").toggleClass('blink');

});

.blink {
  animation: blinker 1s linear infinite;
}
@keyframes blinker {
  50% {
    opacity: 0.0;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id=blinkdiv class='blink'>I am Blinking</div>
<p>
  <button id=t>Toggle Blink</button>

P.S: I picked the code from How to make blinking/flashing text with css3?

Answer 2

You can create a smooth blinker by using CSS, for example:

.blink{
    -webkit-animation-name: blinker;
    -webkit-animation-duration: 0.5s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-name: blinker;
    -moz-animation-duration: 0.5s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    animation-name: blinker;
    animation-duration: 0.5s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

You trigger it by adding or removing the class blink:

$(".myElement").addClass("blink");
$(".myElement").removeClass("blink");