Menu Animation

app.js

var win = Ti.UI.createWindow();

var mainView = Ti.UI.createView();

var parent1 = Ti.UI.createView({top:0, bottom:0, backgroundColor:'blue'});

var parent1Child1 = Ti.UI.createView({top:50, bottom:0, backgroundColor:'green'});

parent1.add(parent1Child1);

var parent1Child1Child1 = Ti.UI.createView({top:50, bottom:0, backgroundColor:'gray'});

parent1Child1.add(parent1Child1Child1);

var parent1Child2 = Ti.UI.createView({top:50, bottom:0, backgroundColor:'purple'});

parent1Child1.add(parent1Child2);

var parent2 = Ti.UI.createView({top:50, bottom:0, backgroundColor:'red'});

var parent3 = Ti.UI.createView({top:50, bottom:0, backgroundColor:'green'});

var bottom = Ti.UI.createView({top:50, bottom:0, backgroundColor:'white'});

mainView.add(parent1);

parent1.add(parent2);

parent2.add(parent3);

parent3.add(bottom);

win.add(mainView);


parent1.addEventListener('click', function(e){
	if(e.source == parent1){
		if(parent2.top != 100){
			parent2.animate({top:100, duration:1000});
			setTimeout(function(){
				parent2.top = 100;
			}, 1000);
		} else {
			parent2.animate({top:50, duration:1000});
			setTimeout(function(){
				parent2.top = 50;
			}, 1000);
		}
	}
});

parent1Child1.addEventListener('click', function(e){
	if(e.source == parent1Child1){
		if(parent1Child2.top != 100){
			parent1Child2.animate({top:100, duration:1000});
			parent2.animate({top:200, duration:1000});
			setTimeout(function(){
				parent2.top = 200;
			}, 1000);
			setTimeout(function(){
				parent1Child2.top = 100;
			}, 1000);
		} else {
			parent1Child2.animate({top:50, duration:1000});
			parent2.animate({top:100, duration:1000});
			setTimeout(function(){
				parent2.top = 100;
			}, 1000);
			setTimeout(function(){
				parent1Child2.top = 50;
			}, 1000);
		}
	}
});
parent2.addEventListener('click', function(e){
	if(e.source == parent2){
		if(parent3.top != 200){
			parent3.animate({top:200, duration:1000});
			setTimeout(function(){
				parent3.top = 200;
			}, 1000);
		} else {
			parent3.animate({top:50, duration:1000});
			setTimeout(function(){
				parent3.top = 50;
			}, 1000);
		}
	}
});

parent3.addEventListener('click', function(e){
	if(e.source == parent3){
		if(bottom.top != 200){
			bottom.animate({top:200, duration:1000});
			setTimeout(function(){
				bottom.top = 200;
			}, 1000);
		} else {
			bottom.animate({top:50, duration:1000});
			setTimeout(function(){
				bottom.top = 50;
			}, 1000);
		}
	}
});
win.open();