InnerFade with JQuery

What is it?

InnerFade is a small plugin for the jQuery-JavaScript-Library. It's designed to fade you any element inside a container in and out.

These elements could be anything you want, e.g. images, list-items, divs. Simply produce your own slideshow for your portfolio or advertisings. Create a newsticker or do an animation.

The call


$('ID or class of the element containing the fading objects').innerfade({
	animationtype: Type of animation 'fade' or 'slide' (Default: 'fade'),
	speed: Fadingspeed in milliseconds or keywords (slow, normal or fast)(Default: 'normal'),
	timeout: Time between the fades in milliseconds (Default: '2000'),
	type: Type of slideshow: 'sequence', 'random' or 'random_start' (Default: 'sequence'),
	containerheight: Height of the containing element in any css-height-value (Default: 'auto')
	runningclass: CSS-Class which the container get’s applied (Default: 'innerfade')
});


<script type="text/javascript">
	$(document).ready(
		function(){
			$('#news').innerfade({
				animationtype: 'slide',
				speed: 750,
				timeout: 2000,
				type: 'random',
				containerheight: '1em'
			});

			$('#portfolio').innerfade({
				speed: 'slow',
				timeout: 4000,
				type: 'sequence',
				containerheight: '220px'
			});
			
			$('.fade').innerfade({
				speed: 'slow',
				timeout: 1000,
				type: 'sequence',
				containerheight: '1.5em'
			});
		}
	);
</script>

Examples

A newsticker (with animationtype: 'slide')

1 Lorem ipsum dolor
2 Sit amet, consectetuer
3 Sdipiscing elit,
4 sed diam nonummy nibh euismod tincidunt ut
5 Nec Lorem.
6 Et eget.
7 Leo orci pede.
8 Ratio randorus wil.


<ul id="news">
	<li>
		<a href="#n1">1 Lorem ipsum dolor</a>
	</li>
	<li>
		<a href="#n2">2 Sit amet, consectetuer</a>
	</li>
	<li>
		<a href="#n3">3 Sdipiscing elit,</a>
	</li>
	<li>
		<a href="#n4">4 sed diam nonummy nibh euismod tincidunt ut</a>
	</li>
	<li>
		<a href="#n5">5 Nec Lorem.</a>
	</li>
	<li>
		<a href="#n6">6 Et eget.</a>
	</li>
	<li>
		<a href="#n7">7 Leo orci pede.</a>
	</li>
	<li>
		<a href="#n8">8 Ratio randorus wil.</a>
	</li>
</ul>

A list with images and links


<ul id="portfolio"> 
	<li>
		<a href="#">
			<img src="images/ggbg.gif" alt="Good Guy bad Guy" />
		</a>
	</li>
	<li>
		<a href="#">
			<img src="images/whizzkids.gif" alt="Whizzkids" />
		</a>
	</li> 
	<li>
		<a href="#">
			<img src="images/km.jpg" alt="Königin Mutter" />
		</a>
	</li> 
	<li>
		<a href="#">
			<img src="images/rt_arch.jpg" alt="RT Hybride Archivierung" />
		</a>
	</li> 
	<li>
		<a href="#">
			<img src="images/tuev.jpg" alt="TÜV SÜD Gruppe" />
		</a>
	</li> 
</ul>

Elements with classes


<div class="fade"> 
	<p>
		1
	</p>
	<p>
		2
	</p>
	<p>
		3
	</p>
	<p>
		4
	</p>
	<p>
		5
	</p>
	<p>
		6
	</p>
	<p>
		7
	</p>
	<p>
		8
	</p>
	<p>
		9
	</p>
	<p>
		10
	</p> 
</div>

<div class="fade"> 
	<p>
		A
	</p>
	<p>
		B
	</p>
	<p>
		C
	</p>
	<p>
		D
	</p>
	<p>
		E
	</p>
	<p>
		F
	</p>
	<p>
		G
	</p>
	<p>
		H
	</p>
	<p>
		I
	</p>
	<p>
		J
	</p>
	<p>
		K
	</p>
	<p>
		L
	</p>
	<p>
		M
	</p>
	<p>
		N
	</p>
	<p>
		O
	</p>
	<p>
		P
	</p>
	<p>
		Q
	</p>
	<p>
		R
	</p>
	<p>
		S
	</p>
	<p>
		T
	</p>
	<p>
		U
	</p>
	<p>
		V
	</p>
	<p>
		W
	</p>
	<p>
		X
	</p>
	<p>
		Y
	</p>
	<p>
		Z
	</p> 
</div>