Question

我有以下类型的动画。但我需要动画它继续而不是顶部并突然再次启动它。换句话说，从底部到顶部平滑动画然后再从底部开始（像一个循环）。可以我有什么帮助吗？

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

JSFiddle

的网址

Answer 1

尝试http://jsfiddle.net/u8027Lgf/1/

而不是

parent.append(currentItem);

尝试类似

的内容

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

Answer 2

沿着这些方向的东西应该可以解决问题

演示：http://jsfiddle.net/sampath_lokuge/u8027Lgf/

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

jQuery继续循环图像

2 个答案: