AnimEng

by Ben Clayton

HTML

<div class="group-wrapper scene-a0 full">A0</div>
<div class="group-wrapper scene-a1 full">A1</div>
<div class="group-wrapper scene-a2 full">A2</div>
<div class="group-wrapper scene-a3 full">A3</div>
<div class="group-wrapper scene-b bottom">B</div>
<div class="group-wrapper scene-b0 top">B0</div>
<div class="group-wrapper scene-b1 top">B1</div>
<div class="group-wrapper scene-b2 top">B2</div>
<div class="group-wrapper scene-c0 full">C0</div>
<div class="group-wrapper scene-c1 full">C1</div>
<div class="group-wrapper scene-c2 full">C2</div>
<div class="group-wrapper scene-c3 full">C3</div>

CSS

.group-wrapper {
    border:1px solid red;
    position:fixed;
    display:none;
    text-align:center;
    padding-top:30px;
    font-size:40px;
    left:10px;
    right:10px;
}
.group-wrapper.full {
    top:10px;
    bottom:10px;
    display:none;
}
.group-wrapper.top {
    top:10px;
    height:90px;
    display:none;
}
.group-wrapper.bottom {
    top:134px;
    bottom:10px;
    display:none;
}

JavaScript

function animationengine() {
    var _self=this;
    _self.state = 'a'; // a, b , c
    _self.oldstate = '';
    _self.substate = {
        a: 0,
        b: 0,
        c: 0
    };
    _self.oldshow = '';
    _self.oldsubshow = '';
   
    _self.changestate=function(){
        var s1 = ".scene-" + _self.state;
        var s2 = s1 + _self.substate[_self.state];
       	console.log("show ",s1,s2);
 	  	$(s1+","+s2).stop().fadeIn();
 
        if(_self.oldshow){
       		console.log("hide ",_self.oldshow,_self.oldsubshow);
        	$(_self.oldshow+","+_self.oldsubshow).stop().fadeOut();
        }
        _self.oldshow = s1;
        _self.oldsubshow = s2;
    }
 
    _self.changesubstate=function(){
        var s1 = ".scene-" + _self.state + _self.substate[_self.state];
       	console.log("show ",s1);
 	  	$(s1).stop().fadeIn();
      	console.log("hide ",_self.oldsubshow);
        $(_self.oldsubshow).stop().fadeOut();

        _self.oldsubshow = s1;
        _self.nextsubstate();
    }
    
    _self.nextsubstate=function(){
        if(_self.tid)clearTimeout(_self.tid);
    	if($(".scene-" + _self.state + _self.substate[_self.state]).length){
            var c=_self.substate[_self.state]++;
            if($(".scene-" + _self.state + _self.substate[_self.state]).length){
            	_self.tid=setTimeout(_self.changesubstate,8000);
            }else{
                _self.substate[_self.state]=0;
                if(c!=0) _self.tid=setTimeout(_self.changesubstate,8000);
            }
        }
    }
    
    
    _self.init = function () {
        $(document).on('keypress', function (event) {
            _self.state=String.fromCharCode(event.keyCode);
            if(_self.state!=_self.oldstate){
                _self.changestate();
            	_self.oldstate=_self.state;
                _self.nextsubstate();
            }
			//event.chr
        });
    };
    return _self;
}

var engine = new animationengine();
engine.init();