Geek asks and answers

JQuery Spy (vertical ticker): after the 4th iteration, the list items are animated down, increasing the height of the container

we use Remy Sharp's jQuery spy plugin to build a vertical spy ticker. The module works fine for the first 4 iterations, and after that it behaves strangely - the list items ultimately scan down (increasing the actual height) of the parent container (the yellow border visible below is the actual border of the parent div).

We do not see this problem in the original demo presented on this plugin site (http://jqueryfordesigners.com/demo/simple-spy.html).

But this only happens on our page , something complicated that needs to be fixed - see our page, URL: http://www.jean.net16.net/

Thanks so much for your support in advance!

PS. for link to spy plugin source: http://jqueryfordesigners.com/simple-jquery-spy-effect/

+3
source share
1 answer
    $(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
+1
source

More articles:


All Articles