當元素在屏幕上可見時運行動畫

我有一點進度條腳本。它工作正常，但在頁面加載時運行。我想在屏幕上顯示條形圖時運行動畫（如果進度條位於製表符中，它也應該可以工作）。我怎麼能得到這個？當元素在屏幕上可見時運行動畫

這裏的腳本：

setTimeout(function(){ 

    $('.skill-bar .skill-bar-content').each(function() { 
     var me = $(this); 
     var perc = me.attr("data-percentage"); 

     var current_perc = 0; 

     var progress = setInterval(function() { 
      if (current_perc>=perc) { 
       clearInterval(progress); 
      } else { 
       current_perc +=1; 
       me.css('width', (current_perc)+'%'); 
      } 

      me.text((current_perc)+'%'); 

     }, 10); 

    }); 

},10);

的jsfiddle：http://jsfiddle.net/fUyYL/

來源

2013-01-25 eXorcist

我想這個答案將解決您的問題： http://stackoverflow.com/questions/6689793/how-can-i-force-jquery-animations-to-occur-when-該窗口不是重點 –

它不工作，因爲我想認真，所以我會嘗試其他解決方案。 – eXorcist

像這樣的事情？ http://jsfiddle.net/fUyYL/1/

var ele = $('#skill-bars'); 
if(ele.is(':visible')) { 
    ... 
}

來源

2013-01-25 12:16:29

嗯，它不起作用。 – eXorcist

@eXorcist因爲元素的CSS有'display：none'，當被移除時http://jsfiddle.net/fUyYL/2/ –

動畫工作沒有滾動，等待幾秒鐘，滾動，你會看到動畫完成，爲頂部添加更多的像素保證金，等待，然後滾動 –

當元素在屏幕上可見時運行動畫

回答

相關問題