Jquery kullanarak fade efekti ile rasgele yazılar göstereiblirsiniz.Tüm websitelerinde kullanılabilir olan bu özelliği görelim.

Html kod olarak aşağıdaki şablonu kullanıyoruz

<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>

Css dosyamıza aşağıdaki kodları ekliyoruz.

#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 */
	}

son olarakta sayfamızın head ve /head tagları arasına aşağıdakileri ekliyoruz.

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
this.randomtip = function(){
	var length = $("#tips li").length;
	var ran = Math.floor(Math.random()*length) + 1;
	$("#tips li:nth-child(" + ran + ")").show();
};
$(document).ready(function(){
	randomtip();
});
</script>