jQuery to text changes with fading effect

In this first jQuery tutorial we will develop a program that text Changes with fading effect.

jQuery to text changes with fading effect

jQuery to text changes with fading effect

     

In this first jQuery tutorial we will develop a  program that  text Changes with fading effect.

Steps to develop the program

 Step 1:

 

 

 

Create a new file (textfade.html) and add the following code into

<html>	
<head>
<title>Text Changes with Sliding Effect</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="imagetoolbar" content="no" />
<script type="text/javascript" src="script/jquery.js"></script>
<script type="text/javascript" src="script/jqfade.js"></script>
<script type="text/javascript">
   $(document).ready(
	function(){
		$('#news').innerfade({
	       	    animationtype: 'fade',
		    speed: 1000,
		    timeout: 2000,
	            type: 'random'
			});
					
				
			});
  	</script>

	<style type="text/css" media="screen, projection">
	@import url(style/fade.css);
	</style>		
</head>
<body>				

<table >	
 <tr>
  <td  valign="top">
   <ul id="news" type="none">					
    <li class="newsid">
      <p>1.Exercise your brain. Brains, like bodies, need
           exercise to keep fit. If you don't exercise your 
           brain, it will get flabby and useless. Exercise 
           your brain by reading a lot.</p>
    </li>
    <li class="newsid">
      <p>2.Read as much as you can about everything possible.
         Books exercise your brain, provide inspiration and
         fill you with information that allows you to make 
         creative connections easily.</p>
    </li>
    <li class="newsid">
      <p>3.Don't do drugs. People on drugs think they are creative.
         To everyone else, they seem like people on drugs.</p>
    </li>
   </ul>
  </td>
 </tr>
</table>
</body>
</html>

Program explanation:

The following code includes the jQuery JavaScript library file:

<script type="text/javascript" src="script/jquery.js"></script>
<script type="text/javascript" src="script/jqfade.js"></script>

 

Function is called 

$('#news').innerfade

 When this function  having attributes 

   animationtype: 'fade',
speed: 1000,
timeout: 2000,
type: 'random'

  

This set the animationType, speed,timeout and show thetype of data.

  

When you run the program in browser it will look like following screen shot:

 

After 1000 msec randomly show the next Text

  

 

Check online demo of the application

Learn from experts! Attend jQuery Training classes.