jQuery Simple Spy不再适用于jQuery 1.5

我正在尝试使用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('
' + $(this).html() + '
'); }); total = items.length; $list.wrap('
').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()调用。 为了使新插入的元素影响内容流，它必须具有可见的显示。