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.
(function($) {
$.fn.innerfade = function(options) {
return this.each(function() { }
$.innerfade(this, options);
});
};
$.innerfade = function(container, options) {
var settings = {
'animationtype': 'fade',
'speed': 'normal',
'type': 'sequence',
'timeout': 2000,
'containerheight': 'auto',
'runningclass': 'innerfade',
'children': null
};
if (options)
$.extend(settings, options);
if (settings.children === null)
var elements = $(container).children();
else
var elements = $(container).children(settings.children);
if (elements.length > 1) {
$(container).css('position', 'relative').css('height', settings.containerheight).addClass(settings.runningclass);
for (var i = 0; i < elements.length; i++) {
$(elements[i]).css('z-index', String(elements.length-i)).css('position', 'absolute').hide();
};
if (settings.type == "sequence") {
setTimeout(function() {
$.innerfade.next(elements, settings, 1, 0);
}, settings.timeout);
$(elements[0]).show();
} else if (settings.type == "random") {
var last = Math.floor ( Math.random () * ( elements.length ) );
setTimeout(function() {
do {
current = Math.floor ( Math.random ( ) * ( elements.length ) ); } while (last == current ); $.innerfade.next(elements, settings, current, last);
}, settings.timeout);
$(elements[last]).show();
} else if ( settings.type == 'random_start' ) { settings.type = 'sequence'; var current = Math.floor ( Math.random () * ( elements.length ) ); setTimeout(function(){ $.innerfade.next(elements, settings, (current + 1) % elements.length, current); }, settings.timeout); $(elements[current]).show();
} else {
alert('Innerfade-Type must either be \'sequence\', \'random\' or \'random_start\''); }
}
};
$.innerfade.next = function(elements, settings, current, last) {
if (settings.animationtype == 'slide') {
$(elements[last]).slideUp(settings.speed);
$(elements[current]).slideDown(settings.speed);
} else if (settings.animationtype == 'fade') { $(elements[last]).fadeOut(settings.speed); $(elements[current]).fadeIn(settings.speed, function() { removeFilter($(this)[0]);
});
} else
alert('Innerfade-animationtype must either be \'slide\' or \'fade\''); if (settings.type == "sequence") {
if ((current + 1) < elements.length) {
current = current + 1;
last = current - 1;
} else {
current = 0;
last = elements.length - 1;
}
} else if (settings.type == "random") {
last = current;
while (current == last)
current = Math.floor(Math.random() * elements.length);
} else
alert('Innerfade-Type must either be \'sequence\', \'random\' or \'random_start\'');
setTimeout((function() {
$.innerfade.next(elements, settings, current, last);
}), settings.timeout);
};
})(jQuery);
// **** remove Opacity-Filter in ie ****
function removeFilter(element) {
if(element.style.removeAttribute){
element.style.removeAttribute('filter');
}
}
<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
Elements with classes
<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>
<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>
No comments:
Post a Comment