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="http://medienfreunde.com/deutsch/referenzen/kreation/good_guy__bad_guy.html">
<img src="images/ggbg.gif" alt="Good Guy bad Guy" />
</a>
</li>
<li>
<a href="http://medienfreunde.com/deutsch/referenzen/kreation/whizzkids.html">
<img src="images/whizzkids.gif" alt="Whizzkids" />
</a>
</li>
<li>
<a href="http://medienfreunde.com/deutsch/referenzen/printdesign/koenigin_mutter.html">
<img src="images/km.jpg" alt="Königin Mutter" />
</a>
</li>
<li>
<a href="http://medienfreunde.com/deutsch/referenzen/webdesign/rt_reprotechnik_-_hybride_archivierung.html">
<img src="images/rt_arch.jpg" alt="RT Hybride Archivierung" />
</a>
</li>
<li>
<a href="http://medienfreunde.com/deutsch/referenzen/kommunikation/tuev_sued_gruppe.html">
<img src="images/tuev.jpg" alt="TÜV SÜD Gruppe" />
</a>
</li>
</ul>
Elements with classes
1
2
3
4
5
6
7
8
9
10
A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
P
Q
R
S
T
U
V
W
X
Y
Z
<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>