带有溢出的 div 的 jquery marquee-like 动画 :hidden and nowrap?

Question

我有一个用于歌曲标题的 block 元素(具有最大宽度、nowrap 和溢出:隐藏的绝对定位 h1)，需要限制为 650 像素宽。如果 H1 的宽度是 650px，我需要启动一个动画，以类似乒乓球的方式水平、前后滚动 div。

我该如何制作滚动动画？

Answer 1

我知道这不是解决这个问题的最有效或最好的方法，但我最终创建了两个 jquery 函数来完成任务:

$.fn.pingpongscroll = function () {
    var delay = 30;
    $(this).wrapInner('<span>');
    var contentWidth = $(this).children('span').width();
    var boxWidth = $(this).width();

    if (contentWidth > boxWidth) {
        var startIndent = parseInt($(this).css('text-indent'));
        var currIndent  = startIndent;
        var left = true;
        $(this).pingpongscrollstep(contentWidth, startIndent, currIndent, left, delay);
    }
};
$.fn.pingpongscrollstep = function (contentWidth, startIndent, currIndent, left, delay) {
    if($(this).length != 0) {
        thisdelay = delay;
        if(left) {
            if(contentWidth + currIndent > $(this).width()) {
                currIndent = currIndent - 1;
                $(this).css('text-indent', currIndent);
            } else {
                left = false;
                thisdelay = thisdelay*20;
            }
        } else {
            if(currIndent < startIndent) {
                currIndent = currIndent + 1;
                $(this).css('text-indent', currIndent);
            } else {
                left = true;
                thisdelay = thisdelay*30;
            }
        }
        var thiselement = this;
        setTimeout(function(){
            $(thiselement).pingpongscrollstep(contentWidth, startIndent, currIndent, left, delay);
        }, thisdelay);
    }
};

虽然这些效果很好，但我确信这不是处理滚动的正常方法。另外，我不知道如何使第二个函数成为第一个函数的私有(private)成员，因此站点无法调用它......有人知道如何做到这一点吗？