How to animate visibility for mulitiple div statements...

**jmwoodward** · 06-23-2006 12:59 AM

Hi,
I need help setting up a javascript flipbook-type animation. I have found several examples of these online, but they are for pictures. What I want to do is make one to work with div statements. Using css :WAVE: nd a tiny javascript I have created such an animation, but you have to continuously click on the divs to make one hide and then another pop up. I wanted to know if there was a way to make this process automate, so onload of the page it cycles through the animation automatically.

This is what I am using now.
<script language="javascript">
//toggles layer visibility on and off
function show(id) {
document.getElementById(id).style.visibility = "visible";
}
function hide(id) {
document.getElementById(id).style.visibility = "hidden";
}
</script>

See below example for the entire code.
-------------------------------------
<html>
<body lang=EN-US style='tab-interval:.5in'>
<head>
</head>
<style>
#tgoombad { background:green;color:pink; left:35; top:5px; height:95px; width:50px;
z-index:1004; font-size: 20pt; text-align: center; position:absolute; z-index:1;}
</style>
<script language="javascript">
//toggles layer visibility on and off
function show(id) {
document.getElementById(id).style.visibility = "visible";
}
function hide(id) {
document.getElementById(id).style.visibility = "hidden";
}
</script>
<div id="tgoombad" onclick="hide('tgoombad'); show('tgoombaa'); "></div>


<style>
#tgoombac { background:yellow;color:pink; left:35; top:5px; height:95px; width:50px;
z-index:1004; font-size: 20pt; text-align: center; position:absolute; z-index:1;}
</style>
<script language="javascript">
//toggles layer visibility on and off
function show(id) {
document.getElementById(id).style.visibility = "visible";
}
function hide(id) {
document.getElementById(id).style.visibility = "hidden";
}
</script>
<div id="tgoombac" onclick="hide('tgoombac'); show('tgoombad'); "></div>


<style>
#tgoombab { background:red;color:pink; left:35; top:5px; height:95px; width:50px;
z-index:1004; font-size: 20pt; text-align: center; position:absolute; z-index:1;}
</style>
<script language="javascript">
//toggles layer visibility on and off
function show(id) {
document.getElementById(id).style.visibility = "visible";
}
function hide(id) {
document.getElementById(id).style.visibility = "hidden";
}
</script>
<div id="tgoombab" onclick="hide('tgoombab'); show('tgoombac'); "></div>


<style>
#tgoombaa { background:blue;color:pink; left:35; top:5px; height:95px; width:50px;
z-index:1004; font-size: 20pt; text-align: center; position:absolute; z-index:1;}
</style>
<script language="javascript">
//toggles layer visibility on and off
function show(id) {
document.getElementById(id).style.visibility = "visible";
}
function hide(id) {
document.getElementById(id).style.visibility = "hidden";
}
</script>
<div id="tgoombaa" onclick="hide('tgoombaa'); show('tgoombab'); "> </div>

</body>
</html>

-------------------------------------
Thanks in advance for any help

Joshua Woodward

**evlich** · 06-23-2006 02:53 AM

Take a look at the following:

Code:

<!-- basic template file for HTML -->

<html>
<title>hello world</title>
<script type="text/javascript" language="javascript1.5">

function hide(id) {
	document.getElementById(id).style.visibility = 'hidden';
}
function show(id) {
	document.getElementById(id).style.visibility = 'visible';
}

function Animation(_frames, _timeout) {
	var frames = _frames;
	var timeout = _timeout;
	var current = 0;
	
	for( i = 1; i < frames.length; i++ )
		hide(frames[i]);
	
	function Animation_Next() {
		hide(frames[current]);
		current = (1 + current) % frames.length;
		//alert(current);
		show(frames[current]);
		window.setTimeout(Animation_Next, timeout);
	}
	
	function Animation_Start() {
		window.setTimeout(Animation_Next, timeout);
	}
	
	this.play = Animation_Start;
	return this;
}
</script>
<style type="text/css">
div.frame { position: absolute; width: 300px; height: 300px; left: 150px; top: 150px; }
div#d0 { background-color: black; color: white }
div#d1 { background-color: blue }
div#d2 { background-color: yellow }
div#d3 { background-color: red }
div#d4 { background-color: green }
</style>
<body onload="(new Animation(new Array('d0','d1','d2','d3','d4'), 1000)).play();">

<div class="frame" id="d0">start</div>
<div class="frame" id="d1">hello</div>
<div class="frame" id="d2">good bye</div>
<div class="frame" id="d3">hello</div>
<div class="frame" id="d4">good bye</div>


</body>

</html>

Its kinda ugly, and the many colors hurt my eyes, but I think its kinda like what you want to do. Hope it helps.

**jmwoodward** · 06-24-2006 03:43 AM

This is exactly what I needed. It works great.

Thread: How to animate visibility for mulitiple div statements...

Thread Tools

Display

How to animate visibility for mulitiple div statements...

Thank you!!!

Similar Threads

Scrollbars in IE display in the DIV tag

HELP: DataGrid inside DIV Layer

change content of DIV, new content to be a Script

visibility attribute conundrum in IE5.5 and NS6

One DIV on top of another

Bookmarks

Bookmarks

Posting Permissions