Question

我试图让徽标像霓虹灯一样闪烁，然后停在徽标的“on”版本上。我正在使用此功能为徽标设置动画并赋予其霓虹效果：

// make logo glow
var $FlickImg = $('.logo img'), c = 0;

(function loop(){
  var time = ~~(Math.random()*600) + 1;
  $FlickImg.delay( time ).fadeTo(30, ++c%2, loop);
})();

问题是我希望它在循环X次之后停止（比方说，10）。我尝试了一个间隔，但它的作用是停止X秒的动画然后它开始。我想要相反：动画应该在加载时开始，然后在10秒或10个循环之后停止。

Answer 1

jQuery动画的一大优点是它们排队，所以：

(function(){
  var i, time;

  for (i = 0; i < 10; ++i) {
      time = ~~(Math.random()*600) + 1;
      $FlickImg.delay( time ).fadeTo(30, ++c%2);
  }
})();

这将排列动画的10次迭代，这些迭代按顺序发生。请注意，我们不需要使用回调，也不需要给函数命名（这很好，因为IE8获取了该构造 - 它被称为命名函数表达式 - 错误; details）。或者你甚至可以完全摆脱这个功能，虽然这对于确定范围很有用。

Answer 2

对于10次迭代，您可以使用迭代变量：

var logo_loop_iterations = 0;
(function loop(){
  if (++logo_loop_iterations == 10) return;
  var time = ~~(Math.random()*600) + 1;
  $FlickImg.delay( time ).fadeTo(30, ++c%2, loop);
})();

Answer 3

您可以在脚本中添加一个计数器变量：

var $FlickImg = $('.logo img'), c = 0;
var count = 0;

(function loop(){
  if (count==10) return;
  count++;
  var time = ~~(Math.random()*600) + 1;
  $FlickImg.delay( time ).fadeTo(30, ++c%2, loop);
})();

Answer 4

试试这个

var Count = 0;
var myVariable= function(){
     if(Count <= 10) {
          Count++;
         var time = ~~(Math.random()*600) + 1;
  $FlickImg.delay( time ).fadeTo(30, ++c%2, loop);
     } else {
          clearInterval(myVariable);
     }
};

$(document).ready(function(){
     setInterval(myVariable, 10000);
});

循环动画然后停止

4 个答案: