Multiple Random JQuery Fade-Ins

Make several elements fade-in independently, each with it's own fade-in timer.

by Matthew Schenker

HTML

<div class="fade_container">
    <div class="fade1">Fade1</div>
    <div class="fade2">Fade2</div>
    <div class="fade3">Fade3</div>
    <div class="fade4">Fade4</div>
</div>

CSS

.fade_container {
    position: relative;
}
.fade1, .fade2, .fade3, .fade4 {
    width: 50px;
    margin-right: 20px;
    padding: 20px;
    color: #fff;
    float: left;
    position: absolute;
    border-radius: 10px;
}
.fade1 {
    background-color: red;
    top: 20px;
    left: 30px;
}
.fade2 {
    background-color: blue;
    top: 50px;
    left: 200px;
}
.fade3 {
    background-color: green;
    top: 125px;
    left: 70px;
}
.fade4 {
    background-color: orange;
    top: 175px;
    left: 300px;
}

JavaScript

$.fn.hideNFadeIn = function (opts) {
    var options = opts;
    this.each(function (i) {
        $(this).hide(0).delay(options.delay[i]).fadeIn(options.fadeIn[i]);
    });
};
$('.fade1, .fade2, .fade3, .fade4').hideNFadeIn({
    delay: [500, 800, 1000, 1500],
    fadeIn: [9500, 9000, 10000, 15000]
});