設置閃爍動畫超時

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

圖像消失是由於unflickr沒有返回偶數，然後將其隱藏圖像Math.random()電話。

爲了解決這個問題，我修改了一下代碼，檢查已完成的迭代次數，並在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);