带有溢出的div的jquery字幕式动画：隐藏和nowrap？

我有一个用于歌曲标题的块元素（绝对定位的h1，最大宽度，nowrap和overflow:hidden），需要限制为650px宽。如果H1的宽度是650px，我需要启动一个动画，以乒乓球般的方式水平、前后滚动div

---

如何制作滚动动画？

有一个jquery字幕插件

---

我知道这不是解决此问题的最有效或最好的方法，但我最终创建了两个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);
    }
};

$.fn.pingpongscroll=函数（）{
var延迟=30；
$（this.wrapInner（“”）；
var contentWidth=$（this.children（'span'）.width（）；
var-boxWidth=$（this.width（）；
如果（contentWidth>boxWidth）{
var startIndent=parseInt（$（this.css（'text-indent'））；
var currendent=startIndent；
var left=真；
$（此）.pingpongscrollstep（contentWidth、startIndent、currendent、left、delay）；
}
};
$.fn.pingpongscrollstep=函数（contentWidth、startIndent、currendent、left、delay）{
if（$（this）.length！=0）{
这个延迟=延迟；
如果（左）{
if（contentWidth+currendent>$（this）.width（））{
currendent=currendent-1；
$（this.css（'text-indent'，currendent）；
}否则{
左=假；
thisdelay=thisdelay*20；
}
}否则{
如果（当前缩进<起始缩进）{
currendent=currendent+1；
$（this.css（'text-indent'，currendent）；
}否则{
左=真；
thisdelay=thisdelay*30；
}
}
var thiselement=此；
setTimeout（函数（）{
$（此元素）.pingpongscrollstep（contentWidth、startIndent、currendent、left、delay）；
}，此延迟）；
}
};

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

我重构了，以使用jQuery动画子系统

我的版本和他的版本之间的时间有点不同，但这应该很容易调整

(function( $ ) {
    $.fn.pingpongscroll = function () {
        $(this).wrapInner('<span style="white-space: nowrap">');
        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;

            var maxIndent = $(this).width() - contentWidth;
            pingpong($(this));

            function pingpong($el) {
                $el
                    .delay(2500)
                    .animate(
                        {'text-indent' : maxIndent},
                        5000,
                        'linear')
                    .delay(2500)
                    .animate(
                        {'text-indent' : startIndent},
                        5000,
                        'linear',
                        function() {
                            pingpong($el)
                        });
            }
        }
    };
})(jQuery);

（函数（$）{
$.fn.pingpongscroll=函数（）{
$（this.wrapInner（“”）；
var contentWidth=$（this.children（'span'）.width（）；
var-boxWidth=$（this.width（）；
如果（contentWidth>boxWidth）{
var startIndent=parseInt（$（this.css（'text-indent'））；
var currendent=startIndent；
var left=真；
var maxIndent=$（this）.width（）-contentWidth；
乒乓球（$（本））；
功能乒乓球（$el）{
$el
.延迟（2500）
.制作动画(
{'text-indent'：maxIndent}，
5000,
‘线性’）
.延迟（2500）
.制作动画(
{'text-indent'：startIndent}，
5000,
“线性”，
函数（）{
乒乓球（$el）
});
}
}
};
})（jQuery）；

不幸的是，该插件仅直接模仿字幕标记，不提供乒乓滚动。