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

尝试定义滚动持续时间

$('#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); 

      }); 

Answer 2

如果你看一下代码，插件使用，你会得到以下功能：

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()属性。你可能希望做类似的事情。