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（）。

Answer 2

正如@treeface所说，问题是$insert元素上的“display：none”设置。除此之外，我不认为该插件应该像它一样工作。我相信这利用了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()电话。为了使新插入的元素影响内容流，必须具有可见的显示。

jQuery Simple Spy不再适用于jQuery 1.5

2 个答案: