如何模仿這樣的led動畫？

Question

我嘗試用javascript構建led動畫。臭蟲目前我能夠得到這樣的：http://jsbin.com/esakip/1/

動畫parten：

*___*___*___*___*___*___*___*___*___*___*___*___*___*___

它顯示每400毫秒，我想將其切換這樣的例子：

開/關3次開關，然後睡1秒，然後再做這個過程。

 
*_*_*______*_*_*______*_*_*______*_*_*______*_*_*______ 

Answer 1

使其成爲配置：

var pattern=('*_*_*______').split(''); 

function showNext(lastIndex){ 
    var nextIndex = lastIndex+1; 
    // go back to the start if we are past the end 
    nextIndex = nextIndex % pattern.length; 
    // do we need to do anything? 
    if(pattern[lastIndex] != pattern[nextIndex]){ 
     //fade in or out depending on the current symbol 
     if(pattern[nextIndex]=='*'){ 
      $('#led').fadeIn('fast'); 
     }else{ 
      $('#led').fadeOut('fast'); 
     } 
    } 
    // call this function again after a pause 
    setTimeout(function(){showNext(nextIndex);},400); 
} 
// start the thing off 
showNext(-1); 

Answer 2

使用jQuery：

$('#led').fadeIn('fast').fadeOut('fast').fadeIn('fast').fadeOut('fast').delay('1000').fadeIn('fast').fadeOut('fast').fadeIn('fast').fadeOut('fast').delay('1000'); ...

http://jsfiddle.net/kvJsc/

Answer 3

必須這樣做：

while (true) 
$('#led').fadeIn('fast').fadeOut('fast').fadeIn('fast').fadeOut('fast').delay('1000'); 

Answer 4

使用而崩潰的瀏覽器...如果你需要循環這個動畫，把它放在一個有趣的地方ction一次又一次回憶吧..

$(function(){ 
    setInterval(function(){ 

    $('#led').fadeIn('fast').fadeOut('fast').fadeIn('fast').fadeOut('fast').delay('1000'); 

    },1800); 
}); 

更新http://jsfiddle.net/kvJsc/5/