The 'innerfade' effect using jQuery plug-in

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

The 'innerfade' effect using jQuery plug-in
Posted on: July 31, 2010 at 12:00 AM

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

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

«Previous Index Next»

Ask Questions?

If you are facing any programming issue, such as compilation errors or not able to find the code you are looking for.

Ask your questions, our development team will try to give answers to your questions.

Tutorial Topics