У меня есть анимация прокрутки 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: Я сделал ссылку на скрипку, чтобы проиллюстрировать, что я испытываю. Нависание над областью начинается с прокрутки, но вам нужно навести курсор на область, а затем отвести указатель мыши, чтобы она была чем-то вроде изменчивости и неудобства. Есть идеи?
Я думаю, вам стоит просто попробовать подключить jQuery Easing плагин - http://gsgd.co.uk/sandbox/jquery/easing/
Включите файл и выберите любой тип ослабления, который вам нравится.