Как зацикливать эту простую анимацию jQuery 3 раза, а затем остановить?

Question

Я пытаюсь получить слово «ГОТОВ», чтобы вспыхнуть 3 раза, а затем исчезнуть, как в старых школьных видеоиграх. Я использую jQuery для изменения css от display: block; до display: none;, но я не могу заставить его работать, и я также новичок в анимации с помощью jQuery, и я обеспокоен тем, что это не лучший способ сделать это. Может ли кто-нибудь сказать мне, почему это не работает и/или сказать мне самый практичный способ сделать это? (Я уверен, что есть лучший способ сделать вещи мигающими, чем метод, который я пытаюсь).

Вот скрипка: http://jsfiddle.net/7dawdrtq/1/

Вот JQuery:

function ready_blink($){ 
    for (i = 0; i <= 3; i++){ 
     $('#ready').css({'display': 'none'}); 
     setTimeout(function(){$('#ready').css({'display': 'block'}), 500;}); 
    } 
}; 

$(document).ready(function() { 
    ready_blink($); 
}); 

Answer 1

Попробуйте это:

function ready_blink($, show, count){ 
    if (show) { 
     count = count - 1; 
     $('#ready').css({'display': 'block'}); 
    } else { 
     $('#ready').css({'display': 'none'}); 
    } 
    if (count > 0 || show) { 
     setTimeout(function(){ 
      ready_blink($, !show, count); 
     }, 500); 
    } 
}; 

$(document).ready(function() { 
    ready_blink($, true, 3); 
}); 

Так пара вещей, которые собираются здесь. Во-первых, ваш тайм-аут (500) находится внутри функции, которую вы передаете setTimeout, она должна быть после функции (setTimeout(fn, timeoutInterval)). Кроме того, это настройка дисплея не три раза, а затем три функции, отображающие значение для блокировки выполнения. Более простой способ (как в коде выше) - асинхронно передавать ваше состояние через.

Answer 2

Вы можете использовать jQuerys показать/скрыть опцию, чтобы сделать тот же эффект, и только цепь событий. Вот пример:

var opt = { 
    duration: 500 
}; 

$('#ready') 
    .show(opt).hide(opt) 
    .show(opt).hide(opt) 
    .show(opt).hide(opt); 

Fiddle: http://jsfiddle.net/skriblez/7dawdrtq/3/