Online Training Spring Hibernate Training in Delhi R Programming Training Course Big Data and Hadoop Training Java Training

jQuery to text changes with sliding effect

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


jQuery to text changes with sliding effect


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

Steps to develop the program

 Step 1:





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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"DTD/xhtml1-strict.dtd"> <html xmlns="" 
xml:lang="de" lang="de"> <!-- saved from url=(0013)about:internet --> 
<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: 'slide', 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.Always carry a small notebook and a pen or 
pencil around with you. That way, if you are 
struck by an idea, you can quickly note it down. 
Upon rereading your notes, you may discover 
about 90% of your ideas are daft. Don't worry, 
that's normal. What's important are the 10% that 
are brilliant. </p>

</li> <li class="newsid"> <p> 2.If 
you're stuck for an idea, open a 
dictionary, randomly select a word and 
then try to formulate ideas 
incorporating this word. You'd be 
surprised how well this works. The 
concept is based on a simple but little 
known truth: freedom inhibits 
creativity. There are nothing like 
restrictions to get you thinking. </p> 
</li> <li class="newsid"> <p> 3.Don't 
watch TV. Experiments performed by the 
JPB Creative Laboratory show that 
watching TV causes your brain to slowly 
trickle out your ears and/or nose. It's 
not pretty, but it happens. </p> </li>

</ul> </td> </tr>


</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 


 When this function  having attributes 

   animationtype: 'slide',
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.


Share on Google+Share on Google+

jQuery to text changes with sliding effect

Posted on: September 8, 2008 If you enjoyed this post then why not add us on Google+? Add us to your Circles



Discuss: jQuery to text changes with sliding effect  

Post your Comment

Your Name (*) :
Your Email :
Subject (*):
Your Comment (*):
  Reload Image
January 17, 2012

Thanks for starting the ball rolling with this insgiht.