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().