javascript - jQuery Simple Spy 不再适用于 jQuery 1.5

Question

我正在尝试将 Remy Sharp 的 Simple Spy (http://jqueryfordesigners.com/simple-jquery-spy-effect) 与 jQuery 1.5 结合使用。它在 1.4 中工作得很好，但在 1.5 中，在第一个注释消失后，它不会加载任何附加注释。

任何人都可以看到代码中需要更新哪些内容才能与 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);

我已在 JSBin 上发布了它的副本，您可以在其中查看发生的情况:

http://jsbin.com/olutu3

这是旧版本 jQuery 的工作版本:

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

Answer 1

好的，在 spy() 函数的最顶部，尝试执行以下操作:

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

我在这里模拟了这个:

http://jsfiddle.net/treeface/xaJ9F/ (jsbin 很烦我)

这里的区别在于您没有声明它应该是“display:none”。在更改对象的动画不透明度时，jQuery 所做的隐式假设一定发生了变化，因为插件创建者在将不透明度动画为 1 并将高度动画为任意 px 后似乎不必更改显示值。不过，这并不是最强大的插件...它没有为您提供设置高度的选项，它只是假设第一个插件是所有插件的高度。

无论如何......尝试一下，看看它是否有效。如果没有(或导致跨浏览器问题)，请尝试重新插入 display:none 并在其后的某个位置调用 $insert.show() 。