javascript - 对元素执行 'for loop' 使其闪烁

Question

我目前正在尝试使用循环使元素闪烁 5 次，以便我可以替换当前代码。为了满足类的要求，这个必须被替换为循环。我当前的代码是

    $(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);
});

我上次尝试在此函数上使用循环是

$(function(){

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

但它只闪烁一次...我有一种感觉，这是因为“i”需要在函数中的某个位置，但我还没有在任何位置上取得成功。谢谢

Answer 1

您可以使用 i 作为乘数来增加超时延迟

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

或者设置一个递归函数

function blink(counter){   

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

     });  

}

使用

blink(1);