JQuery Marquee - как Пандора - PullRequest
Новая
       4

JQuery Marquee - как Пандора

2 голосов
/ 10 августа 2010

Я пытаюсь сделать выделение - с помощью jQuery, которое похоже на Pandora.

Я хочу, чтобы оно только начало прокручиваться, если

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();
    });
}
...