JQuery Simple Spy no longer works with jQuery 1.5

I am trying to use Remy Sharp Simple Spy (http://jqueryfordesigners.com/simple-jquery-spy-effect) with jQuery 1.5. It works fine with 1.4, but in 1.5 it does not load any additional comments after the first one disappears.

Can anyone see what needs to be updated in the code so that it works with 1.5?

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

(function ($) {

$.fn.simpleSpy = function (limit, interval) {

limit = limit || 4;
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
        height = $list.find('> li:first').height();

    // capture the cache
    $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();

    // 2. effect        
    function spy() {
        // insert a new item with opacity and height of zero
        var $insert = $(items[currentItem]).css({
            height : 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({ height : height }, 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();
            // });
        });

        currentItem++;
        if (currentItem >= total) {
            currentItem = 0;
        }

        setTimeout(spy, interval)
    }

    spy();
});
};

})(jQuery);

I posted a copy on JSBin where you can see what happens:

http://jsbin.com/olutu3

Here's a working version with an older version of jQuery:

http://jqueryfordesigners.com/demo/simple-spy.html

+2
source share
2 answers

So, in the function spy(), at the very top, try to do this:

var $insert = $(items[currentItem]).css({
    height : 0,
    opacity : 0
}).prependTo($list);

I have such a thing here:

http://jsfiddle.net/treeface/xaJ9F/ (jsbin )

, , "display: none". , , jQuery , , , , 1 px. , ... , , , .

... , . ( ), display:none $insert.show() - .

+5

@treeface, "display: none" $insert. , , - . , - , ​​ 1.5.0. "" :

...
var $insert = $(items[currentItem]).css({
  height : 0,
  opacity : 0,
  display: 'none'
}).prependTo($list);

$list.find('> li:last').toggle().animate({ opacity : 0}, 1000, function () {
...

.toggle(). , .

+1

All Articles