3

Remy Sharp による jQuery スパイ プラグインを使用して、垂直スパイ ティッカーを構築しています。モジュールは最初の 4 回の反復で正常に動作し、その後、奇妙な動作をします - リスト要素は最終的に親コンテナーの (実際の高さを増やして) 下に這っていきます (下部に表示される黄色の境界線は、親 div の実際の境界線です)。

このプラグイン Web サイト (http://jqueryfordesigners.com/demo/simple-spy.html) で提供される元のデモでは、この問題は見られません。

しかし、それは私たちのページでのみ発生します。何か問題があり、修正が必要です。私たちのページを参照してください。URL: 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 に答える