Javascript jQuery字幕状潘多拉

我正在尝试制作一个字幕——通过jQuery，这就像潘多拉的字幕

我想让它只开始滚动，如果

1） 元素的宽度将被截断 2） 如果您将鼠标悬停在元素上

当您将鼠标移离它时，它应该会恢复正常

到目前为止，我已经掌握了一些基本有效的方法：

var h3 = $('h3:first'), h3Width = h3.width();

if( h3.get(0).scrollWidth > h3Width ) {
    $(h3).addClass('department-scroll-container').css( 'width', h3.width() + 'px' ).wrapInner( '<span style="width: ' + h3Width + 'px; position: relative; display:block" />' );
    $('span:first', h3).clone().appendTo( h3 ).hide();

    // Create the event
    h3.mouseover( function() {
        var h3 = $(this), h3Width = $(this).width();

        $(this).find('span:first').animate({ 'right': h3Width + 'px' }, 5000 );
        var interval = setInterval( function() {
            var visible_span = $('span:visible:first', h3);

            $('span:hidden', h3).css( 'right', parseInt( -h3Width ) + 'px' ).show().animate({ 'right': h3Width + 'px' }, 5000, 'linear' );
            visible_span.hide();
        }, 5000 );

        $(this).data( 'interval', interval );
    }).mouseout( function() {
        var interval = $(this).data( 'interval' );
        clearInterval( interval );
        $(this).find('span:first').css( 'right', '0' ).end().find('span:last').hide();
    });
}

var h3=$（'h3:first'），h3Width=h3.width（）；
if（h3.get（0.scrollWidth>h3Width）{
$（h3.addClass（'department-scroll-container'）.css（'width'，h3.width（）+'px'）.wrapInner（''）；
$（'span:first'，h3.clone（）.appendTo（h3.hide（）；
//创建事件
h3.鼠标悬停（函数（）{
var h3=$（this），h3Width=$（this.width（）；
$（this.find（'span:first'）.animate（{'right'：h3Width+'px'}，5000）；
var interval=setInterval（函数（）{
var visible_span=$（'span:visible:first'，h3）；
$（'span:hidden'，h3）.css（'right'，parseInt（-h3Width）+'px'）.show（）.animate（{'right'：h3Width+'px'}，5000，'linear'）；
可见_span.hide（）；
}, 5000 );
$（此）.data（'interval'，interval）；
}).mouseout（函数（）{
var interval=$（this.data（'interval'）；
间隔时间；
$（this.find（'span:first'）.css（'right'，'0'）.end（）.find（'span:last'）.hide（）；
});
}

问题是，这会使它滚动一次

我认为鼠标出洞被触发是因为它的跨度也在其中——我需要一种方法使它更平滑，并且以某种方式工作

有什么想法吗

---

更新

多亏了下面的答案，我得到了一个解决方案，请参见以下内容：

var h3 = $('h3:first', department), h3Width = h3.width();

// Marquee
if( h3.get(0).scrollWidth > h3Width ) {
    $(h3).addClass('department-scroll-container').css( 'width', h3.width() + 'px' ).wrapInner( '<span style="width: ' + h3Width + 'px; position: relative; display:block" />' );
    $('span:first', h3).clone().appendTo( h3 ).hide();

    // Create the event
    h3.mouseenter( function() {
        var h3 = $(this), h3Width = $(this).width();

        $(this).data( 'animate', true ).find('span:first').animate({ 'right': h3Width + 'px' }, 2500, 'linear' );

        setTimeout( function() {
            // Don't continue if it's been stopped
            if( !h3.data('animate') )
                return;

            var visible_span = $('span:visible:first', h3);

            $('span:hidden', h3).css( 'right', parseInt( -h3Width ) + 'px' ).show().animate({ 'right': h3Width + 'px' }, 5000, 'linear' );
            visible_span.hide();

            var interval = setInterval( function() {
                // Don't continue if it's been stopped
                if( !h3.data('animate') )
                    return;

                var visible_span = $('span:visible:first', h3);

                $('span:hidden', h3).css( 'right', parseInt( -h3Width ) + 'px' ).show().animate({ 'right': h3Width + 'px' }, 5000, 'linear' );
                visible_span.hide();
            }, 5000 );
         }, 2500 );

        $(this).data( 'interval', interval );
    }).mouseleave( function() {
        $(this).data( 'animate', false );

        var interval = $(this).data( 'interval' );
        clearInterval( interval );
        $(this).find('span:first').stop().css( 'right', '0' ).show().end().find('span:last').stop().hide();
    });
}

var h3=$（'h3:first'，department），h3Width=h3.width（）；
//帐篷
if（h3.get（0.scrollWidth>h3Width）{
$（h3.addClass（'department-scroll-container'）.css（'width'，h3.width（）+'px'）.wrapInner（''）；
$（'span:first'，h3.clone（）.appendTo（h3.hide（）；
//创建事件
h3.mouseenter（函数（）{
var h3=$（this），h3Width=$（this.width（）；
$（this）.data（'animate'，true）.find（'span:first'）.animate（{'right'：h3Width+'px'}，2500，'linear'）；
setTimeout（函数（）{
//如果已停止，请不要继续
如果（！h3.data（'animate'））
回来
var visible_span=$（'span:visible:first'，h3）；
$（'span:hidden'，h3）.css（'right'，parseInt（-h3Width）+'px'）.show（）.animate（{'right'：h3Width+'px'}，5000，'linear'）；
可见_span.hide（）；
var interval=setInterval（函数（）{
//如果已停止，请不要继续
如果（！h3.data（'animate'））
回来
var visible_span=$（'span:visible:first'，h3）；
$（'span:hidden'，h3）.css（'right'，parseInt（-h3Width）+'px'）.show（）.animate（{'right'：h3Width+'px'}，5000，'linear'）；
可见_span.hide（）；
}, 5000 );
}, 2500 );
$（此）.data（'interval'，interval）；
}).mouseleave（函数（）{
$（此）.data（'animate'，false）；
var interval=$（this.data（'interval'）；
间隔时间；
$（this）.find（'span:first'）.stop（）.css（'right'，'0'）.show（）.end（）.find（'span:last'）.stop（）.hide（）；
});
}