javascript - 如何制作这样的 LED 动画？

Question

我正在尝试使用 javascript 构建一个 LED 动画。目前的错误我可以像这样得到它：http: //jsbin.com/esakip/1/

动画部分：

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

它每 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

你必须这样做：

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

Answer 3

使用 while 会导致浏览器崩溃...如果您需要循环播放此动画，请将其放入函数中并一次又一次地调用它..

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

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

  },1800);
});

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

Answer 4

使用 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/