Javascript 使用jquery滚动太长的文本

我正在尝试创建一个在线音乐播放器/中心

我有一个播放音乐并显示当前曲目的播放器：

正如你可以从歌曲的标题中看到的那样，它对于div来说太长了。我想做的是滚动文本，并将其重置为重新滚动等

我已尝试使用以下代码执行此操作：

html:

任何指针都将被通知

这是给你们的一个JSFIDLE：

更新

谁能告诉我：

如何使这种情况自动发生完成

如何减缓滚动完成

---

这是为你们更新的JSFIDLE:

我想你们误解了它的工作原理：

应该是：

$elmt.find('h1')

编辑：为注释更新了fiddle

---

添加了检查文本是否足够长，是否需要滚动，删除了清除间隔，并包装在插件中

---

设置文本动画的更好方法（当文本完全读取=>重新设置动画时）：

---

您是否有特定问题？Chrome控制台显示

未捕获类型错误：无法读取null的属性'left'

，这很可能来自

$elmt.find（'div.current-track h1'）.position（）.left

@EliranMalka是它不滚动fx:$elmt.find（“div.current-track h1”）.position（）是否在此处修复了空行：关闭为太本地化创建，有两件事：1。我怎样才能减缓滚动和2。我怎样才能让它自动运行呢。更改传递给setInterval的毫秒数（我觉得10的速度不错）2。将setInterval移到悬停事件处理程序之外。这很好，但如果它在行尾可见时停止滚动，而不是直接从屏幕上滚动，效果会更好。

$(function() {
    var scroll_text;
    $('div.current-track').hover(

    function() {
        var $elmt = $(this);
        scroll_text = setInterval(function() {
            scrollText($elmt);
        }, 5);
    }, function() {
        clearInterval(scroll_text);
        $(this).find('div.current-track h1').css({
            left: 0
        });
    });

    var scrollText = function($elmt) {
        var left = $elmt.find('div.current-track h1').position().left - 1;
        left = -left > $elmt.find('div.current-track h1').width() ? $elmt.find('div.current-track').width() : left;
        $elmt.find('div.current-track h1').css({
            left: left
        });
    };

});​​

$elmt.find('div.current-track h1')

$elmt.find('h1')

$.fn.scrolltxt = function() {
    var options = $.extend({
        speed : 28
    }, arguments[0] || {});

    return this.each(function() {
        var el = $(this);

        if( el.find('span').width() > el.parent().width() ) {
            var scroll_text = setInterval(function() {
                scrollText();
            }, options.speed);
        };      

        var scrollText = function() {
            var width = el.width(),                
                left = el.position().left - 1;
            left = -left > width ? width : left;
            el.css({left: left});
        };
    });    };

$('.current-track h1').scrolltxt();

$.fn.scrolltxt = function() {
    var options = $.extend({
        speed : 28
    }, arguments[0] || {});

    return this.each(function() {
        var el = $(this);

        if( el.find('span').width() > el.parent().width() ) {
            var scroll_text = setInterval(function() {
                scrollText();
            }, options.speed);
        };      

        var scrollText = function() {
            var width = el.find('span').width(),
                left = el.position().left - 1;
            left = -left > width ? el.width() : left;
            el.css({left: left});
        };
    });
};

$(function() {
    $('.current-track h1').scrolltxt();
});