Настройки тайм-аут мерцания анимации

Question

Это вытекающее из «http://stackoverflow.com/questions/8369174/setting-a-time-for-flicker-animation-on-img»

Я не может фигуру как настроить тайм-аут моей анимации мерцания на тайм-аут и постоянно отображать изображение. Прямо сейчас - он мерцает все красиво, как предполагалось, но каждая другая страница посещает/обновляет браузер, после анимации изображение больше не отображается. Это мой логотип, поэтому я хочу, чтобы он мерцал (как тусклый знак), и после того, как он немного мерцает, он просто отображается нормально.

Вот мой код, я пытаюсь:

<script> 


$(document).ready(function(){ 
    var t; 
    var amount = 0; 
    const fparam = 100; 
    const uparam = 100; 

    function timeout(f, t) { // this function delegates setTimeout 
     if(amount++ < 50) { // and checks the amount already (un)flickered 
      setTimeout(f, t); // (150 * 100 ms = 15 s) 
     } 
    else if(amount === 50) { unflickr(); } 
    } 

    var flickr = function(){ 
     if(Math.round(Math.random())){ 
      $("#logodcoi").css("visibility","hidden"); 
      t = timeout(unflickr,uparam); 
     } 
     else 
      t = timeout(flickr,fparam); 

    }; 


    var unflickr = function(){ 
     if(Math.round(Math.random())){ 
      $("#logodcoi").css("visibility","visible"); 
      t = timeout(flickr,fparam); 
     } 
     else 
      t = timeout(unflickr,uparam); 
    }; 

    t = timeout(flickr,fparam); 
}); 

</script> 

Answer 1

Изображение исчезающей связано с Math.random() вызова в unflickr не возвращает четное число, которое затем скрывает изображение.

Чтобы исправить это, я немного изменил ваш код, чтобы проверить количество завершенных итераций и добавить еще одно условие в функцию timeout, чтобы очистить тайм-аут (который должен работать лучше, поскольку оригинал означал, что код будет иметь работать вечно, пока страница отображалась, которая была бы съедено память), а затем отобразить изображение при передаче количество требуемых щелчки:

var t; 
var amount = 0; 
var maxFlickrs = 50 
const fparam = 100; 
const uparam = 100; 

function timeout(f, t) { // this function delegates setTimeout 
    if (amount++ < maxFlickrs) { // and checks the amount already (un)flickered 
     setTimeout(f, t); // (150 * 100 ms = 15 s) 
    } 
    else if (amount === maxFlickrs) { 
     unflickr(); 
    } 
    else { 
     // had number of iterations set in maxFlickrs, stop flickering and display image. 
     clearTimeout(t); 
     $("#logodcoi").css("visibility", "visible"); 
    } 
} 

var flickr = function() { 
    if (Math.round(Math.random())) { 
     $("#logodcoi").css("visibility", "hidden"); 
     t = timeout(unflickr, uparam); 
    } 
    else 
     t = timeout(flickr, fparam); 

}; 

var unflickr = function() { 
    if (Math.round(Math.random())) { 
     $("#logodcoi").css("visibility", "visible"); 
     t = timeout(flickr, fparam); 
    } 
    else 
     t = timeout(unflickr, uparam); 
}; 

t = timeout(flickr, fparam); 

Fiddle to show it working

Answer 2

Зачем изобретать колесо? Для этого вам нужно будет включить jquery UI: http://jqueryui.com/download

$('the element in question').effect("pulsate", { times:3 }, 1000);