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.