2

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

// 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 个循环之后停止。

4

4 回答 4

2

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 获取了该构造 - 称为命名函数表达式 - 错误；详细信息）。或者你甚至可以完全摆脱这个函数，尽管它对范围界定很好。

于 2013-09-26T17:51:32.570 回答
1

对于 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);
})();
于 2013-09-26T17:45:34.693 回答
1

您可以在脚本中添加一个反变量：

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);
})();
于 2013-09-26T17:47:47.990 回答
1

尝试这个

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);
});
于 2013-09-26T17:51:09.320 回答