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

但是它只闪烁一次......我有一种感觉，因为“我”需要在功能中占有一席之地，但我还没有任何位置成功。感谢

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);

Answer 2

我认为更好更有效的方法是使用CSS3动画来闪烁元素：

https://jsfiddle.net/91gmkxrt/

然后你只需要简单的jquery代码来闪烁元素

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

Answer 3

你不应该把循环放在setTimeout周围，只要把它放在重复陈述的位置。你甚至不需要animate回调，因为动画会自动排队等待jQuery。只是去

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

在元素上执行'for循环'以闪烁

3 个答案: