jQuery InnerFade Examples

HTML

<script src="http://medienfreunde.com/lab/innerfade/js/jquery.innerfade.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/foundation/5.4.5/js/vendor/modernizr.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/foundation/5.4.5/js/foundation/foundation.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/foundation/5.4.5/css/normalize.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/foundation/5.4.5/css/foundation.min.css">
<div class="row">
    <div class="large-3 medium-3 small-4 columns text-center">
        <ul class="fade">
            <li>
                <img src="http://placehold.it/100x100/E8117F/ffffff/&text=Element One" alt="Good Guy bad Guy" />
            </li>
            <li>
                <img src="http://placehold.it/100x100/000000/ffffff/&text=Element Two" alt="Good Guy bad Guy" />
            </li>
            <li>
                <img src="http://placehold.it/100x100/333333/ffffff/&text=Element Three" alt="Good Guy bad Guy" />
            </li>
        </ul>
    </div>
    <div class="large-9 medium-9 small-8 columns">
        <ul class="fade2">
            <li>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.</li>
            <li>Jan 1, 2014 - Loads all ZURB Foundation required files from CDN with a local fallback. Don't forget to replace "/local/" with a proper path to your files</li>
            <li>The most advanced responsive front-end framework in the world. Quickly create prototypes and production code for sites and apps that work on any kind of ...</li>
        </ul>
    </div>
</div>

CSS

ul.fade, ul.fade2 {
    list-style: none;
}

JavaScript

$(document).ready(function () {
	    $('#news').innerfade({
	        animationtype: 'slide',
	        speed: 750,
	        timeout: 2000,
	        type: 'random',
	        containerheight: '1em'
	    });
	    $('#portfolio').innerfade({
	        animationtype: 'slide',
	        speed: 'slow',
	        timeout: 4000,
	        type: 'sequence',
	        containerheight: '220px'
	    });
	    $('.fade').innerfade({
	        animationtype: 'slide',
	        speed: 'slow',
	        timeout: 4000,
	        type: 'sequence',
	        containerheight: '300px'
	    });
        	    $('.fade2').innerfade({
	        speed: 'slow',
	        timeout: 4000,
	        type: 'sequence',
	        containerheight: '300px'
	    });
	});