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

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="http://www.w3.org/1999/xhtml" 
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>

</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: '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.