jQuery - Fading Content


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



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.