jQuery Simple Spy不再适用于jQuery 1.5 [英] jQuery Simple Spy no longer works with jQuery 1.5

问题描述

我正在尝试使用Remy Sharp的Simple Spy（http://jqueryfordesigners.com/simple-jquery-spy-effect）和jQuery 1.5。它在1.4下工作正常，但在1.5中它在第一个消失后不会加载任何额外的注释。

I'm trying to use Remy Sharp's Simple Spy (http://jqueryfordesigners.com/simple-jquery-spy-effect) with jQuery 1.5. It works fine with 1.4, but in 1.5 it does not load any additional comments after the first one disappears.

任何人都可以看到代码中需要更新的内容所以它将使用1.5？

Can anyone see what needs to be updated in the code so it will work with 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上发布了一份副本，你可以看到会发生什么：

I've posted a copy of it on JSBin where you can see what happens:

http://jsbin.com/olutu3

这是一个带有旧版jQuery的工作版本：

Here's a working version with an older version of jQuery:

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

推荐答案

好的，所以在 spy（）函数中，在最顶部，尝试这样做：

OK so in the spy() function, at the very top, try doing this:

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

我在这里嘲笑：

http://jsfiddle.net/treeface/xaJ9F/ （jsbin让我讨厌）

http://jsfiddle.net/treeface/xaJ9F/ (jsbin was annoying me)

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

The difference here is that you aren't declaring that it should be "display:none". There must have been a change in the implicit assumptions jQuery makes when changing the animated opacity of an object, because the plugin creator seemed to not have to change the display value after he animated the opacity to 1 and the height to whatever px. This isn't exactly the most robust plugin, though...it doesn't give you an option for setting the height, it just assumes that the first one is the height all of them will be.

无论如何......尝试一下，看看它是否有效。如果它没有（或导致跨浏览器问题），请尝试重新插入 display：none 并在此后的某处调用$ insert.show（）。

Anyway...try that and see if it works. If it doesn't (or causes cross-browser issues) try reinserting the display:none and calling $insert.show() somewhere thereafter.

这篇关于jQuery Simple Spy不再适用于jQuery 1.5的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！