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>

Free jQuery Plugins, HTML5 and CSS3 Scripts - Providing tons of Jquery Plugins,Html5 and CSS3 Scripts for web developers to preview and download. By using these resources, you can create amazing effects with fancy animations of content elements like text, images and so on.