simplr-fade / Playground / Multiple
You can use whatever html structure you want to as long as there is a container with items in it:
<div class="fader">
<div class="item">
<p>item 1</p>
</div>
<!-- ... -->
<div class="item">
<p>item N</p>
</div>
</div>
or a list if you want to:
<ul class="fader">
<li>item 1</li>
<!-- ... -->
<li>item N</li>
</ul>
The container must be relative
and the items must be absolute
:
/*required*/
.fader { position: relative; }
.fader .item { position: absolute; }
The items should have a non transparent background and their size should be equal to the size of the container, in order to hide them one under another.
$('.fader .item').srFade()
Animation duration (in milliseconds: 1000 = 1 second, 400 = 0.4 of a second):
$('.fader .item').srFade({duration: 600})
Time to wait between each step when auto
is on (in milliseconds: 1000 = 1 second, 400 = 0.4 of a second):
$('.fader .item').srFade({delay: 4000})
Specify an easing function to use for the transition between items. When using the animate
property the jQuery Easing plugin must be included inside your page. When using the css3
property no additional plugin is required.
$('.fader .item').srFade({
easing: 'easeOutSine'
})
By default simplr-fade cycles through the items automatically:
$('.fader .item').srFade({auto: false})
Pass css properties to animate (like in the default jQuery animate method):
$('.fader .item').srFade({
animate: { width: 0, height: 0, top:500/2, left:800/2, opacity:0.5 }
})
Specify a predefined animation from the jQuery UI Effect plugin. Note that it must be included inside your page before that:
$('.fader .item').srFade({
effect: 'puff'
})
Appropriate effects to use from the jQuery UI Effect plugin are: blind, clip, drop, explode, fade, fold, puff.
Specify a predefined animation from animate.css. Note that it must be included inside your page before that:
$('.fader .item').srFade({
css3: 'flipOutX'
})
The animate, effect and css3 properties cannot be used simultaneously.
Raised just before the animation starts. It receives the item's index
that is about to be animated. That's the place to update the navigation of the fader (if there is one).
$('.fader .item').srFade({
onFade: function (index) {
$('.fader-nav a').removeClass('active').eq(index).addClass('active')
}
})
Raised after the animation of the current item has completed. It receives the current item's index
. Can be used to start secondary animations within the fader items.
$('.fader .item').srFade({
onAfterFade: function (index) {
$('.fader .item').eq(index).find('p').slideDown()
}
})
First you need a simplr-fade instance:
var fader = $('.fader .item').srFade({
// ... properties and events
})
Navigate back and forth between your items, usefull for navigation arrows:
$('.prev').click(function () {
fader.prev()
return false
})
$('.next').click(function () {
fader.next()
return false
})
Navigate to specific item, usefull for navigation dots:
$('.fader-nav a').click(function () {
fader.fadeTo($('.fader-nav a').index(this))
return false
})
The automatic transition between items can be stopped temporarily and restarted back later on. Usefull when hovering over the fader:
$('.fader .item').mouseover(function () {
fader.stop()
})
$('.fader .item').mouseout(function () {
fader.start()
})