如何制作像这样的led动画?

时间:2013-04-10 09:38:20

标签: javascript html5 animation

我尝试使用javascript构建led动画。 Bug目前我能够像这样:http://jsbin.com/esakip/1/

动画parten:

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

它每400ms显示一次,我希望它像这样切换,例如:

开启/关闭3次,然后休眠1秒,然后再次执行此过程。

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

4 个答案:

答案 0 :(得分:0)

你必须这样做:

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

答案 1 :(得分:0)

使用while时崩溃浏览器...如果你需要循环播放这个动画,把它放在一个函数中并一次又一次地调用它。

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

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

  },1800);
});

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

答案 2 :(得分:0)

使其可配置:

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);

答案 3 :(得分:-1)

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