InnerFade with JQuery
What is it?
InnerFade is a small plugin for the . 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’)
});
$(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'
});
}
);
Examples
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
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
Download
Sorry, you need to activate JavaScript in your browser.