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="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>

Download

jquery.innerfade.zip (124kb)

Webdesign Leipzig – Medienfreunde GbR



Etwas Werbung um die Entwicklungszeit auszugleichen. Hier könnte zum Beispiel Werbung für private Krankenversicherung, Lebensversicherung, KFZ-Versicherung, Versicherung allgemein, Krankenkassen, Online-Shops für Elektronik, wie ipod, mp3-Player, wii, playstation, DVD oder Blu-Ray stehen. Aber auch Hosting, Datenrettung oder Autos könnten ein Thema sein. Vielleicht auch Penisverlängerungen oder Potenzmittel. Muss aber nicht sein. Passt ja dann doch nicht so.

Some advertising to refinance the developingtime. Topics could be hosting, cars, insurance, health care, electronics like ipod, mp3-player, wii, playstation, dvd or blu-ray. Optionally also penis-enlargement or viagra. But this would be out of place.