by Dragos, on November 24th, 2008  
I came up with a simple solution to rotate some divs, having a cute fade in effect. For that i used JQuery.

Supposing you have a div container, you put in it smaller divs which you will use for rotation.






Content in div number one.






...

Notice that each div to be used in rotation has the id="fadeX", where X is the unique number of that specific div.
Now the javascript part to rotate the divs.
<script src="./js/jquery.js" type="text/javascript"><!--mce:0--></script>

<script type="text/javascript">

function fadeEngine(x) {

var total_divs=3; //set your own number of divs

		var y=x;

		if(x==total_divs) y=1; else y++;

		$("#fade"+x).css("display","none");

		$("#fade"+y).fadeIn("slow");

		setTimeout('fadeEngine('+y+')',3000); //modify 3000 to set the time in miliseconds for a div to be shown

	}

	fadeEngine(0); //initialisation of the script

</script>

That's all.

Later, i will post here a demo html page with this code, plus a new version to fade all div with a same class (which should be more convenient), so check this later if you're interested.

Added later on: Ok, i have some spare time so i will post the second method of rotating divs, by assigning only a class to those divs you would like to fade.

Here's the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Content rotation with fading effect using JQuery</title>

<script src="http://code.jquery.com/jquery-latest.js"></script>

<script>

var total_divs=0; //do not change this. it will be calculated automatically

var className=''; //name of your class assigned to the divs you would like to rotate. Need to change it

$(document).ready(function(){



$("."+className).attr("id", function (arr) {

total_divs++;

return "fade" + (arr+1);

})

fadeEngine(0);

});

</script>

<script type="text/javascript">

function fadeEngine(x) {

var y=x;

if(x==total_divs) y=1; else y++;

$("#fade"+x).css("display","none");

$("#fade"+y).fadeIn("slow");

setTimeout('fadeEngine('+y+')',3000);

}



</script>

</head>

<body>



<div class="fadeThis">

Cont 1

</div>

<div class="fadeThis" style="display:none">

Cont 2

</div>

<div class="fadeThis" style="display:none">

Cont 3

</div>



</body>

</html>