tutorial #3: innerfade

The innerfade plugin will make elements alternate with each other. Here, we will use a news ticker as a demonstration.

(Note: the innerfade plugin requires jquery.innerfade.js. For more information on innerfade, visit: medienfreunde.com/lab/innerfade.)

In this demonstration, you will learn how to use innerfade plugin. You will learn how to build the jQuery code needed and learn the purpose of each line. Also, you learn how to create the elements needed to create the news ticker in HTML and CSS.

Below is a demonstration of news ticker using the innerfade. You will see that the text will randomly transition to the next, also, each text is linked to an external webpage.

The How-To

HTML

                 
<div id="ticker">
<ul>
                    
<li><a href="http://www.ap.org/" target="_blank">
<p>Breaking News: The Associated Press Reports....The News 
</p>
 </a></li>
     
<li><a href="http://www.nfl.com/" target="_blank">
<p>Sports: A New NFL Season Starts In September</p>
</a></li>
     
<li>
<a href="http://www.techtimes.com/articles/13139/20140815
/star-wars-vii-set-leaks-reveal-next-generation-stormtrooper-
armor.htm" target="_blank">
<p>
Flim: New Look for Stormtroopers?
</p>
</a>
</li>
     
<li>
<a href="http://new.artinstitutes.edu/york" target="_blank">
<p>
Ad: Enroll At The Art Institute Of York PA 
</p>
</a>
</li>
                 

CSS

#ticker {
  display: block;
  height: 50px;
  background:#155a7a;
  
}

#ticker ul {
  list-style:none;
  margin:20px;
}

#ticker ul li p {
	color:#FFFFFF;
}

#ticker p:hover {
	color:#77B7D5;
}

    

jQuery

                
                
$(document).ready(function() {//The document is ready.
  $('#ticker ul').innerfade({//The "innerfade" method
    animationtype: 'slide',//Sets the animation effect to "silde".  
    speed: 750,//Sets the "silde" effect's speed at 750 milliseconds.
    timeout: 3000,//Sets the speed of the function
    type: 'random'//Rotates the designated elements at "random." 
  });
});//Close.