Notícias em Simply Spy com jQuery
10 de setembro de 2009 - 14:38
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
Fonte: Ted K








Comentários (1)