Multiple JQuery Fade-Ins, then Pulse

Same as the "Multiple JQuery Fade-In" except it also has a pulse that follows the fade-in.

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: [500, 1750, 3500, 5000]
});

$( function() {
    var t = 3000;
    setInterval( function(){
        $('.fade1').fadeOut( t, function(){ $(this).fadeIn( t ); } );
    }, 2*t);
});

$( function() {
    var t = 4000;
    setInterval( function(){
        $('.fade2').fadeOut( t, function(){ $(this).fadeIn( t ); } );
    }, 2*t);
});

$( function() {
    var t = 5000;
    setInterval( function(){
        $('.fade3').fadeOut( t, function(){ $(this).fadeIn( t ); } );
    }, 2*t);
});

$( function() {
    var t = 6000;
    setInterval( function(){
        $('.fade4').fadeOut( t, function(){ $(this).fadeIn( t ); } );
    }, 2*t);
});