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.