How (if possible) can i change the depth of a div so that the one currently animated is on top of the others. I have a simple example here...
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
#rB{
position:absolute;
left:50px;
width:100px;
z-index:1;
}
#gB{
position:absolute;
left:160px;
width:100px;
z-index:2;
}
#bB{
position:absolute;
left:270px;
width:100px;
z-index:3;
}
</style>
<script type="text/javascript" src="TweenMax.min.js"></script>
<script>
function init(){
var redBox = document.getElementById("red");
var greenBox = document.getElementById("green");
var blueBox = document.getElementById("blue");
/*TweenMax.to(redBox, 1.5, {width:150});
TweenMax.to(greenBox, 1.5, {width:150});
TweenMax.to(blueBox, 1.5, {width:150});*/
TweenMax.to(redBox, 1.5, {width:150});
TweenMax.to(greenBox, 1.5, {width:150,delay:1.5});
TweenMax.to(blueBox, 1.5, {width:150,delay:3});
/*var tl = new TimelineMax();
tl.to(redBox, 1.5, {width:150});
tl.to(greenBox, 1.5, {width:150});
tl.to(blueBox, 1.5, {width:150});*/
/*var tl = new TimelineMax();
tl.to(redBox, 1.5, {width:150});
tl.to(greenBox, 1.5, {width:150},-0.5);
tl.to(blueBox, 1.5, {width:150},-0.5);*/
}
</script>
</head>
<body onload="init()">
<div id="rB"><img src="red.gif" id="red" /></div>
<div id="gB"><img src="green.gif" id="green" /></div>
<div id="bB"><img src="blue.gif" id="blue" /></div>
</body>
</html>