带有固定文本的jQuery动画

Question

我需要创建一种上述类型的动画，其中左手网站文本应该从下到上连续移动，而右手边文本（“我的固定文本”）应该与它对齐并且文本是固定的（不移动）。如何我可以通过使用jQuery实现它吗？

我看到了这个链接，但不完全符合我的要求。 JSFiddle

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

Answer 1

你应该有一个左栏和右栏。右列浮动在左侧列旁边。

参见我的例子：

http://jsfiddle.net/e8svLggw/4

var initCarroussel = function(selector, period)
{
    var containerEl  = $(selector);
    var animating    = false;
    setInterval(function(){

        if(animating){
            return;
        } else {
            animating = true;
        }

        // Clone the first item
        var carrousselEl    = containerEl.find('.carroussel');
        var firstEl         = carrousselEl.children().first();
        var clonedEl        = firstEl.clone();

        carrousselEl.append(clonedEl);

        carrousselEl.animate({
            marginTop: [0 -30] 
        },period-100,'swing',function(){
            firstEl.remove();
            carrousselEl.css('margin-top', 0);
            animating = false;
        });

    },period);
}

$(function(){
    initCarroussel('#myCarroussel', 1000); 
});