0
我有一個JQuery滾動動畫（從this answer得到一個問題，幾乎完全滿足我的需求），它的工作。當用戶將鼠標懸停在某一行的邊緣上時，我試圖獲得側邊滾動圖標，有點像Netflix將其瀏覽器主頁與不同的電影海報組織在一起。從鼠標懸停平滑JQuery滾動動畫
但是很像評論者，我在動畫片中有一些非常緩慢，醜陋的混亂。具體來說，當鼠標懸停在邊緣開始動畫時，它會非常不連貫，但是當鼠標完全離開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的菜鳥，這只是第二次我甚至曾經碰過它。有人能告訴我如何平滑動畫，所以它是一個很好的優雅滾動到一邊？
對於獎勵積分，當鼠標離開scroller div時，我希望它完全停止，所以當它們在屏幕上移動鼠標時，最終不會有10個滾動行。
更新：我注意到有點線索，對於任何可以診斷問題的人：只要我的鼠標移動，它就會正常滾動。如果我將鼠標放在懸停區域內並將其移動，則它會完美滾動。只有當我的鼠標停下來，它纔開始緩慢地突然出現。有任何想法嗎？
更新2：我已經做了fiddle link來說明我正在經歷什麼。懸停在該區域確實開始滾動，但您必須將鼠標懸停在該區域上，然後移開鼠標，使其變得沒有任何不規則和尷尬。有任何想法嗎？