<script type="text/javascript" src="Tween.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 Tween(i.style, 'left', Tween.elasticEaseOut, 0, 500, 1, 'px'); t.start(); } function moveSmiley2() { var i = document.getElementById("smiley2"); var t = new Tween(i.style, 'left', Tween.elasticEaseOut, 0, 500, 1, 'px'); t.start(); } function moveSmiley3() { var i = document.getElementById("smiley3"); var t = new Tween(i.style, 'left', Tween.elasticEaseOut, 0, 500, 1, 'px'); 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="position: relative; left: 0px;"> <input type="button" value="Move 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="position: relative; left: 0px;"> <input type="button" value="Move 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="position: relative; left: 0px;"> <input type="button" value="Move Smiley 3" onClick="moveSmiley3()"> </div>