Как сделать этот непрерывный вертикальный скроллер? (JQuery)

Question

Смотрите эту страницу:

http://www.laurensbeerten.be/Frames/FrameE.html

Первая проблема заключается в том, что через секунду или около того происходит анимация в анимации.

Вторая проблема заключается в том, что после того, как все изображения зациклены, они сразу же начинают снова сверху, а не непрерывно. Есть ли способ изменить это?

Я думаю, мне нужно как-то клонировать набор изображений и прикрепить это ..

код:

$(function() {
  var ticker = $('#ticker');
  function animator(currentItem, first) {                              
    if (first) {
      distance = 85;
    } else {
      distance = currentItem.outerHeight();
    }
    duration = (distance + parseInt(currentItem.css("marginTop"))) / 0.05;
    if (isNaN(duration)) {
      duration = 1200;
    }
    currentItem.animate({ marginTop: -distance}, duration, "linear", function() {
      currentItem.appendTo(currentItem.parent()).css("marginTop", 0);
      animator(currentItem.parent().children(":first"));
    });
  };
  animator(ticker.children(":first"), true);
  ticker.mouseenter(function() {
    ticker.children().stop();
  });
  ticker.mouseleave(function() {
    animator(ticker.children(":first"));
  });
});

Answer 1

У меня есть две скрипки JS для вас.

Первый исправляет ваш код http://jsfiddle.net/VCBXz/12/. Первая проблема заключалась в том, что вам нужно манипулировать полем контейнера, а не текущим элементом. Во-вторых, вам нужно отсоединить и повторно добавить текущий элемент в DOM, чтобы список был обновлен.

Вторая скрипка использует CSS3 http://jsfiddle.net/ca7Ef/4/. Таким образом, код не задействован. Поддержка браузера может быть не так хороша, как jquery, но это то, что нужно учитывать.

Вот обновленный javascript. Обратите внимание, что я изменил ваш внутренний тег p на div.

var ticker = $('#ticker');
var container = $('#ticker > div');
var spacing = ticker.outerHeight() - ticker.height();

function animator(currentItem) {
    var distance = currentItem.outerHeight() + spacing;
    var currentTop = parseInt(container.css('margin-top'), 10);
    var duration = (distance + currentTop) / 0.05;

    container.animate({ marginTop: -distance}, duration, "linear", function() {
        var parent = currentItem.parent();

        currentItem.detach();
        parent.css("marginTop", 5);

        parent.append(currentItem);
        animator(parent.children(":first"));
    });
};


animator(container.children(":first"));
ticker.mouseenter(function() {
    container.stop();
});

ticker.mouseleave(function() {
    animator(container.children(":first"));
});​