jQuery继续使用图像进行循环

我有以下类型的动画。但我需要继续设置动画，而不是转到顶部然后突然重新开始。换句话说，从底部到顶部平滑动画，然后再次从底部开始（如循环）。我能得到任何帮助吗

JS

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"));
});

链接的URL

试试看

而不是

parent.append(currentItem);

试试像这样的东西

 currentItem.css("display", "none");
 parent.append(currentItem);
 currentItem.fadeIn('slow');

---

沿着这条思路做的事情应该能奏效

演示：

---

很难理解您实际想要/期望的结果。@RobSchmuecker您可以在上面看到我的动画，只需转到顶部，然后突然转到底部。但我需要它转到顶部，然后再从底部开始（平滑过渡）。就像一个循环。当然，你可以将它平滑地设置回底部，然后再次循环？@RobSchmuecker你能修改我的JSFIDLE代码吗？我不能那样做。

function animator(currentItem) {
    var distance = currentItem.outerHeight() + spacing;

    var currentTop = parseInt(container.css('margin-top'), 10);

    var duration = (distance + currentTop) / 0.05;

    console.log('animating up');
    container.animate({
        marginTop: -distance
    }, duration, "linear", function () {
        // Now reverse the animation
        console.log('animating down');
        container.animate({
            marginTop: 0
        }, duration, "linear", function () {
            animator(container.children(":first"));
        });
    });
};