Advanced Search

jQuery - Fading Content

/ Published in: jQuery
Save to your folder(s)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <!-- Google jQuery call -->
  2. 	<script type="text/javascript" src="http://www.google.com/jsapi"></script>
  3. 	<script type="text/javascript">
  4.  	 // You may specify partial version numbers, such as "1" or "1.3",
  5.  	 //  with the same result. Doing so will automatically load the 
  6.   	//  latest version matching that partial revision pattern 
  7.   	//  (i.e. both 1 and 1.3 would load 1.3.2 today).
  8.   	google.load("jquery", "1.3.2");
  9.  
  10.   google.setOnLoadCallback(function() {
  11.     // Place init code here instead of $(document).ready()
  12.   });
  13. </script>
  14.  
  15. <script type="text/javascript">
  16.  
  17. this.randomtip = function(){
  18.  
  19. 	var pause = 3000; // define the pause for each tip (in milliseconds) 
  20. 	var length = $("#tips li").length; 
  21. 	var temp = -1;		
  22.  
  23. 	this.getRan = function(){
  24. 		// get the random number
  25. 		var ran = Math.floor(Math.random()*length) + 1;
  26. 		return ran;
  27. 	};
  28. 	this.show = function(){
  29. 		var ran = getRan();
  30. 		// to avoid repeating
  31. 		while (ran == temp){
  32. 			ran = getRan();
  33. 		}; 
  34. 		temp = ran;
  35. 		$("#tips li").hide();	
  36. 		$("#tips li:nth-child(" + ran + ")").fadeIn("fast");		
  37. 	};
  38.  
  39. 	show(); setInterval(show,pause);
  40.  
  41. };
  42.  
  43. $(document).ready(function(){	
  44. 	randomtip();
  45. });
  46.  
  47. </script>		
  48.  
  49. <style type="text/css">
  50.  
  51. 	#tips, #tips li{
  52. 		margin:0;
  53. 		padding:0;
  54. 		list-style:none;
  55. 	}
  56.  
  57. 	#tips{
  58. 		width:250px;
  59. 		font-size:16px;
  60. 		line-height:120%;
  61. 	}
  62.  
  63. 	#tips li{
  64. 		padding:20px;
  65. 		background:#e1e1e1;
  66. 		display:none; /* hide the items at first only */
  67. 	}
  68.  
  69. </style>
  70.  
  71.  
  72. <ul id="tips">
  73. 	<li>... if you want to become a better coder you need to eat your vegetables?</li>
  74. 	<li>... it takes more time to code a web page then to make a pizza?</li>
  75. 	<li>... you should validate your code?</li>
  76. 	<li>... jQuery is your friend? For real!</li>
  77. 	<li>... no matter what some people claim, you can't learn CSS in 3 hours?</li>
  78. </ul>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.