<!-- Google jQuery call -->
	<script type="text/javascript" src="http://www.google.com/jsapi"></script>
	<script type="text/javascript">
 	 // You may specify partial version numbers, such as "1" or "1.3",
 	 //  with the same result. Doing so will automatically load the 
  	//  latest version matching that partial revision pattern 
  	//  (i.e. both 1 and 1.3 would load 1.3.2 today).
  	google.load("jquery", "1.3.2");
 
  google.setOnLoadCallback(function() {
    // Place init code here instead of $(document).ready()
  });
</script>

<script type="text/javascript">

this.randomtip = function(){

	var pause = 3000; // define the pause for each tip (in milliseconds) 
	var length = $("#tips li").length; 
	var temp = -1;		

	this.getRan = function(){
		// get the random number
		var ran = Math.floor(Math.random()*length) + 1;
		return ran;
	};
	this.show = function(){
		var ran = getRan();
		// to avoid repeating
		while (ran == temp){
			ran = getRan();
		}; 
		temp = ran;
		$("#tips li").hide();	
		$("#tips li:nth-child(" + ran + ")").fadeIn("fast");		
	};
	
	show(); setInterval(show,pause);
	
};

$(document).ready(function(){	
	randomtip();
});

</script>		

<style type="text/css">

	#tips, #tips li{
		margin:0;
		padding:0;
		list-style:none;
	}
		
	#tips{
		width:250px;
		font-size:16px;
		line-height:120%;
	}
		
	#tips li{
		padding:20px;
		background:#e1e1e1;
		display:none; /* hide the items at first only */
	}

</style>


<ul id="tips">
	<li>... if you want to become a better coder you need to eat your vegetables?</li>
	<li>... it takes more time to code a web page then to make a pizza?</li>
	<li>... you should validate your code?</li>
	<li>... jQuery is your friend? For real!</li>
	<li>... no matter what some people claim, you can't learn CSS in 3 hours?</li>
</ul>

jQuery - Fading Content

jquery

jQuery