Share on Google+Share on Google+

The 'innerfade' effect using jQuery plug-in

Advertisement
In this tutorial , we will discuss about how to use 'innerfade' effect of jQuery.

The 'innerfade' effect using jQuery plug-in

In this tutorial , we will discuss about how to use 'innerfade' effect of jQuery. In below example, a table has a unordered list ,whose each element displays one by one using 'innerfade ' function. This effect is implemented using "jqfade.js" plug-in. You can change the setting like animation type, speed, timeout, type etc.

innerfade.html

<html>
<head>
<title>InnerFade Example</title>

<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="jqfade.js"></script>

<script type="text/javascript">
$(document).ready(
function(){
$('#news').innerfade({
animationtype: 'slide',
speed: 750,
timeout: 2000,
type: 'random',
containerheight: '1.5em'
});});
</script>
</head>
<body>
<font color="red"><h2>
The InnerFade Effect using "jqfade.js" Plugin</h2></font>

<table border=1>
<tr>
<td valign="center" bgcolor="#DDA0DD" width=500>
<font color="blue">
<center><h3>Functions of jQuery</h3></center>
<ul id="news">
<li>
Jquery Ajax used to connect JSP/Servlet/PHP etc.
</li>
<li >
The .fadeIn() method animates the opacity of the matched elements.
</li>
<li >
The .fadeOut() method animates the opacity of the matched elements
</li>
<li>
The .fadeTo() method animates the opacity of the matched elements.
</li>
<li>
The .animate() perform a custom animation of a set of CSS properties.

</li>
<li>
The .slideDown() method animates the height of the matched elements
</li>
<li>
The .slideToggle() method animates the height of the matched elements.
</li>
<li>
The .slideUp() method animates the height of the matched elements.
</li>
</ul>
</font></td>
</tr>
</table>

</body>
</html>

OUTPUT

The paragraph inside table changes in every 750 milliseconds :

Download Source Code

Click here to see demo

Advertisements

Posted on: July 31, 2010 If you enjoyed this post then why not add us on Google+? Add us to your Circles

Share this Tutorial Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.