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:

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.

jQuery to text changes with fading effect

jQuery to text changes with fading effect

Tutorials