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')

<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="test_images/ggbg.gif" alt="Good Guy bad Guy" /> </a> </li> <li> <a href="http://medienfreunde.com/deutsch/referenzen/kreation/whizzkids.html"> <img src="test_images/whizzkids.gif" alt="Whizzkids" /> </a> </li> <li> <a href="http://medienfreunde.com/deutsch/referenzen/printdesign/koenigin_mutter.html"> <img src="test_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="test_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="test_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>

Download

jquery.innerfade.zip (124kb)

Back to the article