Lightweight jQuery Fade In/Out Slideshow - Fade Through

Fade Through is a small jQuery plugin which enables you to rotate any Html elements with fade in/out effects like a slideshow. Also can be used for a content rotator that loops through any Html elements like text, banners, images, etc.

Basic Usage:

1. Load the jQuery library and jQuery fade through plugin at the bottom of the page before closing body tag.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
<script src="atbo-fadethrough-1.0.js"></script> 

2. The Html markup.

<div id="demo">
<div class="item">
<div class="panel">
<p> <strong>This is Panel #1</strong></p>
</div>
</div>
<div class="item">
<div class="panel">
<p> <strong>This is Panel #2</strong></p>
</div>
</div>
<div class="item">
<div class="panel">
<p> <strong>This is Panel #3</strong></p>
</div>
</div>
<div class="item">
<div class="panel">
<p> <strong>This is Panel #4</strong></p>
</div>
</div>
<div class="item">
<div class="panel">
<p> <strong>This is Panel #5</strong></p>
</div>
</div>
</div>

3. Enable the slideshow with default settings.

$( document ).ready(function() {
$('#demo').fadeThrough();
});

4. Available settings and defaults.

$( document ).ready(function() {
$('#demo').fadeThrough({
interval: 3000,
fadeduration: 500,
heightduration: 500,
animatestartheight: false,
autostart: true,
autowidth: false,
childIdentifier: '.item'});
});

---

This awesome jQuery plugin is developed by ATBOStudio. For more Advanced Usages, please check the demo page or visit the official website.