The 'innerfade' effect using jQuery plug-in

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

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

Ads