2

我正在尝试将 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);

我已经在 J​​SBin 上发布了它的副本，您可以在其中看到发生了什么：

http://jsbin.com/olutu3

这是一个使用旧版本 jQuery 的工作版本：

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

4

2 回答 2

5

好的，所以在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() 。

于 2011-02-15T19:17:45.017 回答
1

正如@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()调用的添加。为了让新插入的元素影响内容流，它必须有一个可见的显示。

于 2011-02-15T20:05:14.710 回答