jQuery鼠标悬停间隔

Question

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

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);

            });