jQuery Simple Spy больше не работает с jQuery 1.5 - PullRequest
Новая
       25

jQuery Simple Spy больше не работает с jQuery 1.5

2 голосов
/ 15 февраля 2011

Я пытаюсь использовать Простого шпиона Реми Шарпа (http://jqueryfordesigners.com/simple-jquery-spy-effect) с jQuery 1.5. Он отлично работает с 1.4, но в 1.5 он не загружает никаких дополнительных комментариев после исчезновения первого.

Кто-нибудь может увидеть, что нужно обновить в коде, чтобы он работал с 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, где вы можете увидеть, что происходит:

http://jsbin.com/olutu3

Вот рабочая версия со старой версией jQuery:

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

Ответы [ 2 ]

5 голосов
/ 15 февраля 2011

ОК, поэтому в функции spy() в самом верху попробуйте сделать это: 

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

У меня здесь есть этот макет:

http://jsfiddle.net/treeface/xaJ9F/ (jsbin меня раздражал)

Разница в том, что вы не заявляете, что это должно быть "display: none". Должно быть, было изменение неявных допущений, которые делает jQuery при изменении анимированной непрозрачности объекта, поскольку создателю плагина, по-видимому, не приходилось изменять значение отображения после того, как он анимировал непрозрачность до 1 и высоты до любого значения px. Это не самый надежный плагин, хотя ... он не дает вам возможности установить высоту, он просто предполагает, что первым будет высота, которой будут все они.

В любом случае ... попробуйте и посмотрите, работает ли это. Если это не так (или вызывает кросс-браузерные проблемы), попробуйте заново вставить display:none и вызвать $ insert.show () где-то после этого.

1 голос
/ 15 февраля 2011

Как сказал @treeface, проблема заключается в установке «display: none» в элементе $insert.Кроме того, я не думаю, что плагин должен был когда-либо работать так, как работал.Я считаю, что это эксплуатировало какую-то ошибку, которая была исправлена ​​в 1.5.0.Еще одно «исправление» для исходного кода: 

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

$list.find('> li:last').toggle().animate({ opacity : 0}, 1000, function () {
...

Обратите внимание на добавление вызова .toggle().Для того чтобы вновь вставленный элемент влиял на поток контента, он должен иметь видимый дисплей.

...