jQuery鼠标悬停间隔

Question

我正在尝试在此插件中创建相同的mouseover滚动效果：（尝试将鼠标悬停在箭头上）

http://coffeescripter.com/code/ad-gallery/

我有这个脚本：

$('#leftArrowScroller').bind('mouseover',function() {
        setInterval(function(){
            currentGalleryScroll -= 10;
            $('#scrollMove').animate({'left':currentGalleryScroll+'px'});
        },1);
    });

但是，此脚本无法实现相同的效果。 它按照我的意愿向左移动div动画，但在每个间隔后暂停。 关于如何使滚动像链接中的平滑一样的想法？ 谢谢！

Answer 1

如果查看插件使用的代码，则会得到以下功能：

function () {
  var direction = 'left';
  if($(this).is('.ad-forward')) {
    direction = 'right';
  };
  thumbs_scroll_interval = setInterval(
    function() {
      has_scrolled++;
      // Don't want to stop the slideshow just because we scrolled a pixel or two
      if(has_scrolled > 30 && context.settings.slideshow.stop_on_scroll) {
        context.slideshow.stop();
      };
      var left = context.thumbs_wrapper.scrollLeft() + 1;
      if(direction == 'left') {
        left = context.thumbs_wrapper.scrollLeft() - 1;
      };
      context.thumbs_wrapper.scrollLeft(left);
    },
    10
  );
  $(this).css('opacity', 1);
}

注意它是如何动画的，在时间间隔内设置.scrollLeft()属性。 您可能希望做类似的事情。

Answer 2

尝试定义滚动持续时间

  $('#leftArrowScroller').bind('mouseover',function() { setInterval(function(){ currentGalleryScroll -= 10; $('#scrollMove').animate({'left':currentGalleryScroll+'px'},3000); },1); }); 

我不认为您需要一个setInterval函数尝试删除setInterval

$('#leftArrowScroller').bind('mouseenter',function() {              
            currentGalleryScroll -= 10;
            $('#scrollMove').animate({'left':currentGalleryScroll+'px'},3000);

            });