Сглаживание анимации прокрутки JQuery от наведения мыши

0

У меня есть анимация прокрутки JQuery (полученная из этого ответа на вопрос, который почти полностью соответствует моим потребностям), и он работает. Я пытаюсь получить прокрутку значков на стороне, когда пользователь наводит курсор на края строки, вроде того, как Netflix организует главную страницу своего браузера с различными плакатами фильмов.

Но, как и комментатор, у меня есть очень медленная, уродливая изменчивость с анимацией. В частности, когда мышь наводится по краям, чтобы начать анимацию, она очень изменчивая, но когда мышь затем покидает div анимация сглаживается. Верните мышь в область, хотя, и она снова становится изменчивой.

Здесь мой код, адаптированный с небольшими изменениями от этого ответа выше...

$(".scroller").mousemove(function(e){
    var h = $('#innerscroller').width()+13;
    var offset = $($(this)).offset();
    var position = (e.pageX-offset.left)/$(this).width();

    if(position < 0.10) {
        $(this).stop().animate({ scrollLeft: 0 }, 5000);
        $(".status").html('Percentage1:' + position.toFixed(2) + ' lefting');
    }
    else if(position > 0.90) {
        $(this).stop().animate({ scrollLeft: h }, 5000);
        $(".status").html('Percentage3:' + position.toFixed(2) + ' righting');
    } else {
        $(this).stop();
        $(".status").html('Percentage2:' + position.toFixed(2));
    }
});

И HTML...

<div class="scroller" style="width:680px; overflow-x:auto; overflow:hidden; white-space:nowrap; background-color:blue">
    <div id="innerscroller" style="width:auto;">
        // Row of icons here.
    </div>
</div>

Я полный JQuery noob, это только второй раз, когда я когда-либо даже касался его. Может ли кто-нибудь сказать мне, как я мог бы сгладить анимацию, так что это хороший элегантный свиток в сторону?

И для бонусных очков я бы хотел, чтобы он полностью остановился, когда мышь вышла из scroller div, поэтому они не заканчивают десять прокручивающихся строк всякий раз, когда они перемещают указатель мыши по экрану.

ОБНОВЛЕНИЕ: я заметил немного подсказки, для тех, кто мог диагностировать проблему: она прокручивается нормально, пока моя мышь движется. Если я держу свою мышь в области зависания и просто перемещаю ее, она отлично прокручивается. Это происходит только тогда, когда моя мышь останавливается, и она начинает медленно пробираться. Есть идеи?

ОБНОВЛЕНИЕ 2: Я сделал ссылку на скрипку, чтобы проиллюстрировать, что я испытываю. Нависание над областью начинается с прокрутки, но вам нужно навести курсор на область, а затем отвести указатель мыши, чтобы она была чем-то вроде изменчивости и неудобства. Есть идеи?

Теги:
animation

1 ответ

0

Я думаю, вам стоит просто попробовать подключить jQuery Easing плагин - http://gsgd.co.uk/sandbox/jquery/easing/

Включите файл и выберите любой тип ослабления, который вам нравится.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню