Jquery scrollLeft悬停

Question

如何更改下面的代码，以便div滚动左边不断悬停？目前我在120px处拥有它，这导致每次滚动停止时我都必须再次将鼠标放在下一个按钮上。如果鼠标在下一个按钮上，我希望div以低速滚动。这是JSfiddle

http://jsfiddle.net/mdanz/nCCRy/14/

$(function() {

$('#next-button').hover(function() {
    $('#display-container').animate({
        'scrollLeft': '+=120px'
    }, '500');
});

}）;

Answer 1

https://developer.mozilla.org/en/DOM/window.setInterval

$(function() {

   var timeoutID = null;

   $('#next-button').hover(function() {
       if(timeoutID == null) {
            timeoutID = window.setInterval(startAnimate, 2000); 
       }
   });

   $("#next-button").mouseout(function() {
       window.clearInterval(timeoutID);
       timeoutID = null; 
   });
});

function startAnimate() {
    $('#display-container').animate({
        'scrollLeft': '+=120px'
    }, '500');
}

Answer 2

我刚刚为您的问题找到了解决方案。 这是代码：

$('#next-button').hover(function () {
    $('#display-container').each(function () {
        var item = $(this)[0];
        $(this).animate({ scrollLeft: item.scrollWidth }, 500);
    });
});

Answer 3

已经回答：Scroll on hover, click for speed

只需将其更改为scrollLeft而不是scrollTop。提示：要使滚动效果更平滑，设置的间隔时间更短。

＆＃13;

＆＃13;

var interval;
var count;

$('.yourButton').on('mouseover', function() {
    var div = $('.yourScrollElementBox');

    interval = setInterval(function() {
      count = count || 1;
      var pos = div.scrollLeft();
      div.scrollLeft(pos + count);
    }, 10);
  }).on('mouseout', function() {
    // Uncomment this line if you want to reset the speed on out
    // count = 0;
    clearInterval(interval);
  });

＆＃13;

＆＃13;

＆＃13;