Завершить анимацию, а затем остановить

Question

Я пытаюсь сделать эмблему мерцания, как неоновый знак, а затем остановиться в «на» варианте логотипа. Я использую эту функцию для анимации логотипа и придать ему эффект неона:

// 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

One о великих вещах, связанных с анимацией 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); 
});