krzysztof-hellostudio
2/24/2015 - 3:31 PM

Fading Loop Through Items specified in a container

Fading Loop Through Items specified in a container

// Fading Loop Through Items specified in a container
// --------------------------------------------------
// Usage
// $('#tml-container > p').fadeLoop({
//  fadeIn: 6000,
//  stay: 3000,
//  fadeOut: 6000
// });

(function($) {
    var default_config = {
        fadeIn: 1000,
        stay: 4000,
        fadeOut: 1000
    };

    function fade(index, $elements, config) {
        $elements.eq(index)
            .fadeIn(config.fadeIn)
            .delay(config.stay)
            .fadeOut(config.fadeOut, function() {
                fade((index + 1) % $elements.length, $elements, config);
            });
    }

    $.fn.fadeLoop = function(config) {
        fade(0, this, $.extend({}, default_config, config));
        return this;
    };

}(jQuery));