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