InnerFade with JQuery

The call

$('ID or class of the element containing the fading objects').innerfade({ 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' or 'random' (Default: 'sequence'), containerheight: Height of the containing element in any css-height-value (Default: 'auto') }); <script type="text/javascript"> $(document).ready( function(){ $('#news').innerfade({ 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

<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> </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>

Back to the article