|
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
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
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
