Home Tutorial Jquery The 'innerfade' effect using jQuery plug-in

 
 

Share on Google+Share on Google+
The 'innerfade' effect using jQuery plug-in
Posted on: July 31, 2010 at 12:00 AM
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

Advertisement

Related Tags for The 'innerfade' effect using jQuery plug-in:


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.

Posted on: July 31, 2010

Recommend the tutorial

Advertisements Advertisements
 

 

 

DMCA.com