Animation based on DIV with color flash : Animation : GUI Components JAVASCRIPT DHTML TUTORIALS

JAVASCRIPT DHTML TUTORIALS » GUI Components » Animation »

Animation based on DIV with color flash




/*
Examples From
JavaScript: The Definitive Guide, Fourth Edition

Legal matters: these files were created by David Flanagan, and are
Copyright (c) 2001 by David Flanagan.  You may use, study, modify, and
distribute them for any purpose.  Please note that these examples are
provided "as-is" and come with no warranty of any kind.

David Flanagan
*/
<html>

<!-- This div is the element we are animating -->
<div id="urgent"><h1>Red Alert!</h1>The Web server is under attack!</div>
<!-- This is the animation script for the element -->
<script>  
var e = document.getElementById("urgent");         // Get the element object
var colors = ["white", "yellow", "orange", "red"]  // Colors to cycle through
var nextColor = 0;                                 // Position in the cycle
// Evaluate the following expression every 500 milliseconds.  
// This animates the background color of the DIV element.
setInterval("e.style.backgroundColor=colors[nextColor++%colors.length];", 500);
</script>
</html>