jQuery Spy(垂直滚动条): after 4th iteration, 列表项动画向下，增加容器的高度

Question

我们正在使用 Remy Sharp 的 jQuery spy 插件来构建垂直 spy 代码。该模块在前 4 次迭代中工作正常，然后表现奇怪 - 列表元素最终从父容器向下爬行(增加实际高度)(底部看到的黄色边框是父 div 的实际边框)。

我们在该插件网站 (http://jqueryfordesigners.com/demo/simple-spy.html) 提供的原始演示中没有看到此问题。

但它仅发生在我们的页面上，有一些棘手的问题需要修复 - 请参阅我们的页面，URL:http://www.jean.net16.net/

提前非常感谢您的支持!

PS。 供您引用 spy 插件来源:http://jqueryfordesigners.com/simple-jquery-spy-effect/

Answer 1

    $(function () {
    $('ul.spy').simpleSpy();
    });

    (function ($) {

    $.fn.simpleSpy = function (limit, interval) {

    limit = limit || 4;
    interval = interval || 4000;

    return this.filter(function(){ return typeof $(this).data("simpleSpy") == "undefined" }).each(function () {

        $(this).data("simpleSpy",true);

        var $list = $(this),
            items = [], // uninitialised
            currentItem = limit - 1,
            total = 0, // initialise later on
            height = $list.find('> li:first').height();

        $list.css({"position":"relative","overflow":"hidden"});
        $list.find('> li').each(function () {
            items.push('<li>' + $(this).html() + '</li>');
        });

        total = items.length;

        $list.find('> li').filter(':gt(' + (limit - 1) + ')').remove();

        $list.wrap('<div class="spyWrapper" />').parent().css({ height : $list.parent().height() });

        // 2. effect        
        function spy() {
            // insert a new item with opacity and height of zero
            var $insert = $(items[currentItem]).css({
                height : 0,
                opacity : 0
            }).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);

//end of JS