3

我们正在使用 Remy Sharp 的 jQuery spy 插件来构建一个垂直的间谍代码。该模块在前 4 次迭代中运行良好，之后表现奇怪 - 列表元素最终会向下爬（增加实际高度）父容器（底部看到的黄色边框是父 div 的实际边框）。

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

但它只发生在我们的页面上，有一些棘手的问题需要修复 - 请查看我们的页面，网址： http: //www.jean.net16.net/

非常感谢您的支持，提前！

PS。供您参考间谍插件源：http: //jqueryfordesigners.com/simple-jquery-spy-effect/

4

1 回答 1

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
于 2012-05-28T11:48:30.287 回答