javascript - jQuery マーキー - Pandora のような

Question

私はマーキーを作ろうとしています-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', 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();
    });
}