<script type="text/javascript" src="Tween.js"></script> <script type="text/javascript" src="OpacityTween.js"></script> <script type="text/javascript"> function doSequence() { setTimeout('two()', 5000); setTimeout('three()',10000); } function two() { var i = document.getElementById("one"); i.style.display = "none"; var j = document.getElementById("two"); j.style.display = "block"; } function three() { var i = document.getElementById("two"); i.style.display = "none"; var j = document.getElementById("three"); j.style.display = "block"; } function moveSmiley1() { var i = document.getElementById("smiley1"); var t = new OpacityTween(i, Tween.regularEaseIn, 0, 100, 3); t.start(); } function moveSmiley2() { var i = document.getElementById("smiley2"); var t = new OpacityTween(i, Tween.regularEaseIn, 0, 100, 3); t.start(); } function moveSmiley3() { var i = document.getElementById("smiley3"); var t = new OpacityTween(i, Tween.regularEaseIn, 0, 100, 3); t.start(); } </script> </head> <body onLoad="doSequence()"> <div id="one" style="height: 300px; width: 600px; background-color: red;display: block"> <img src="smileyFace.jpg" id="smiley1" style="filter:Alpha(opacity=0);-moz-opacity:.0"> <input type="button" value="Emerge Smiley 1" onClick="moveSmiley1()"> </div> <div id="two" style="height: 300px; width: 600px; background-color: yellow;display: none"> <img src="smileyFace.jpg" id="smiley2" style="filter:Alpha(opacity=0);-moz-opacity:.0"> <input type="button" value="Emerge Smiley 2" onClick="moveSmiley2()"> </div> <div id="three" style="height: 300px; width: 600px; background-color: blue;display: none"> <img src="smileyFace.jpg" id="smiley3" style="filter:Alpha(opacity=0);-moz-opacity:.0"> <input type="button" value="Emerge Smiley 3" onClick="moveSmiley3()"> </div>