Ted k’ É assim que tem que ser! Programando em ASP, ASP.NET, PHP, CSS, dentre outras…

Notícias em Simply Spy com jQuery

Função em jQuery para Notícias.

O efeito mostrar quatro notícias, para aparecer as outras, a última recebe um fadeOut() e a nova notícia em cima aparece com fadeIn().

Segue o Código:

$(function(){
    $('ul.spy').simpleSpy();
});

(function($){
$.fn.simpleSpy = function (limit, interval) {
    limit = limit || 4;
    interval = interval || 4000;

    return this.each(function () {
        var $list = $(this),
            items = [],
            currentItem = limit,
            total = 0,
            height = $list.find('> li:first').height();
        $list.find('> li').each(function () {
            items.push('<li>' + $(this).html() + '</li>');
        });

        total = items.length;
        $list.wrap('<div class="spyWrapper" />').parent().css({ height : height * limit });
        $list.find('> li').filter(':gt(' + (limit - 1) + ')').remove();

        function spy() {
            var $insert = $(items[currentItem]).css({height : 0, opacity : 0, display : 'none'}).prependTo($list);
				$list.find('> li:last').animate({opacity : 0}, 1000, function () {
            	$insert.animate({ height : height }, 1000).animate({ opacity : 1 }, 1000);
            	$(this).remove();
            });

            currentItem++;
            if (currentItem >= total) {
                currentItem = 0;
            }
            setTimeout(spy, interval)
        }
        spy();
    });
};
})(jQuery);

Veja o exemplo. CLIQUE AQUI

Baixe aqui o arquivo completo: DOWNLOAD