循环播放动画，然后停止

我试图让徽标像霓虹灯闪烁，然后停在徽标的“上”版本。我使用这个功能，动画标志，并给它的霓虹效果：循环播放动画，然后停止

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

的事情是，我希望它循环的时间（例如10）X数量后停止。我尝试了一段时间，但是做了什么就是停止X的动画，然后开始。我想要的是相反的：动画应该在加载时开始，并在10秒或10个循环之后停止。

来源

2013-09-26 El Andi

如果你要去柜台而不是@ T.J。克劳德的建议，然后记住你的'c'变量已经像计数器一样工作，所以你不需要像现在所有的答案所建议的那样创建一个新的变量。 – BYossarian

我要和@ T.J一起去。克罗德的建议。：）是很棒的。 –

@Byossarian：或者即使他/她*正在与我的方法一致，那么就说说好点。 –

一关于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）。或者你甚至可以完全摆脱这个功能，虽然它很适合范围界定。

来源

2013-09-26 17:51:32

不错！完美的作品！谢谢！ –

@ElAndi：很高兴帮助！ –

对于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-26 17:45:34 elimirks

你可以反变量添加到您的脚本：

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-26 17:47:47 jotaen

试试这个

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-26 17:51:09

很好的解决方案，谢谢！ –

循环播放动画，然后停止

回答

相关问题