Performing a 'for loop' on an element to blink

Question

I'm currently trying to make an element blink 5 times with a loop so that I can replace current code. And this has to be replaced by a loop for requirements of class. My current code is

    $(function(){

      setTimeout(function() {
      $(".blink").animate({opacity:0},700,"linear",function(){
        $(this).animate({opacity:1},700);
        $(this).animate({opacity:0},700);
        $(this).animate({opacity:1},700);
        $(this).animate({opacity:0},700);
        $(this).animate({opacity:1},700);
        $(this).animate({opacity:0},700);
        $(this).animate({opacity:1},700);
        $(this).animate({opacity:0},700);
        $(this).animate({opacity:1},700);
        });
      }, 1000);
});

My last trial of using a loop on this function was

$(function(){

    for (var i = 0; i < 4; i++) {
      setTimeout(function() {
      $(".blink").animate({opacity:0},700,"linear",function(){
        $(this).animate({opacity:1},700);
        });
      }, 1000);
    }
});

But it's only blinking one time... I have a feeling it's because "i" needs to be some place in the function, but I have yet to have success with any placements. Thanks

if your browser support list allows it you can use css animations. it is IE10+ — eltonkamami, Feb 14 '16 at 21:53
This can return useful to you http://stackoverflow.com/questions/1605698/text-blinking-jquery — Vixed, Feb 14 '16 at 21:55
See http://stackoverflow.com/questions/26454687/is-there-a-way-to-control-flow-of-promises-in-linear-call-order , http://stackoverflow.com/questions/33381524/jquery-using-individual-blinking-text-counters , http://stackoverflow.com/questions/34691022/jquery-dynamically-change-webkit-animate-time-parameter — guest271314, Feb 14 '16 at 21:56

charlietfl · Accepted Answer · 2016-02-14T22:06:10.333

You can increment the timeout delay using i as a multiplier

for (var i = 0; i < 4; i++) {
  setTimeout(function() {
      $(".blink").animate({opacity:0},700,"linear",function(){
         $(this).animate({opacity:1},700);
      });
  }, 1500 * i);
}

Or set up a recursive function

function blink(counter){   

      $(".blink").animate({opacity:0},700,"linear",function(){
         $(this).animate({opacity:1},700,function(){
            counter ++;
             if(counter < 5){
              // start over
              blink(counter);
             }  
         });

     });  

}

use

blink(1);

score 0 · Answer 2 · answered Feb 14 '16 at 22:19

0

I think that a better and more efficient way would be to use CSS3 animation to blink element:

https://jsfiddle.net/91gmkxrt/

Then you will need just simple jquery code to blink element

$('#box').addClass('blink');

answered Feb 14 '16 at 22:19

Rochu

108
6

score 0 · Answer 3 · answered Feb 14 '16 at 22:53

You shouldn't have put the loop around the setTimeout, just put it where the repetitive statements were. And you even don't need that animate callback, as animations are queued by jQuery automatically. Just go for

$(function(){
  setTimeout(function() {
    var els = $(".blink");
    for (var i = 0; i < 5; i++) {
      els.animate({opacity:0},700,"linear").animate({opacity:1},700);
    }
  }, 1000);
});

Performing a 'for loop' on an element to blink

3 Answers3