(function ($) { $.fn.simpleSpy = function (limit, interval) { limit = limit || 10; interval = interval || 4000; return this.each(function () { // 1. setup // capture a cache of all the list items // chomp the list down to limit li elements var $list = $(this), items = [], // uninitialised currentItem = limit, total = 0, // initialise later on width = $list.find('> li:first').width(); // capture the cache $list.find('> li').each(function () { items.push('
  • ' + $(this).html() + '
  • '); }); total = items.length; $list.wrap('
    ').parent().css({ width : width * limit }); $list.find('> li').filter(':gt(' + (limit - 1) + ')').remove(); // 2. effect function spy() { // insert a new item with opacity and height of zero var $insert = $(items[currentItem]).css({ width : 0, opacity : 0, display : 'none' }).prependTo($list); // fade the LAST item out $list.find('> li:last').animate({ opacity : 0}, 1000, function () { // increase the height of the NEW first item $insert.animate({ width : width }, 1000).animate({ opacity : 1 }, 1000); // AND at the same time - decrease the height of the LAST item // $(this).animate({ height : 0 }, 1000, function () { // finally fade the first item in (and we can remove the last) $(this).remove(); $list.find('> li:last').addClass('last'); // }); }); currentItem++; if (currentItem >= total) { currentItem = 0; } setTimeout(spy, interval) } $('.spy.hideload').removeClass('hideload'); spy(); }); }; })(jQuery);