2014-09-05 101 views
0
$('#next').hover(function() { 
    $('#sliderWrapper').animate({ 
    scrollLeft: "+=200px" 
    }, "fast"); 
}); 

$('#prev').hover(function() { 
    $('#sliderWrapper').animate({ 
    scrollLeft: "-=200px" 
    }, "fast"); 
}); 

请参阅fiddle。我试图让滚动连续,而悬停.hover()函数工作不正常或我认为会。悬停以左右移动滑块

回答

4

也许这可以帮助您

DEMO

function loopNext(){ 
    $('#sliderWrapper').stop().animate({scrollLeft:'+=20'}, 'fast', 'linear', loopNext); 
} 

function loopPrev(){ 
    $('#sliderWrapper').stop().animate({scrollLeft:'-=20'}, 'fast', 'linear', loopPrev); 
} 

function stop(){ 
    $('#sliderWrapper').stop(); 
} 


$('#next').hover(function() { 
    loopNext(); 
},function() { 
    stop(); 
}); 

$('#prev').hover(function() { 
    loopPrev(); 
},function() { 
    stop(); 
}); 

来源:Continuous scroll on hover [performance]

+0

非常感谢你!这是工作[小提琴](http://jsfiddle.net/linddss/88hv1hvs/)! – linddss 2014-09-05 14:59:30

+0

@adrxlm:我的回答错了,我首先以为你的回答和我回答的一样。但你已经很好地回答了它 – 2014-09-05 15:14:06

-2

我会建议使用鼠标悬停事件。当鼠标开始动画时,鼠标停止动画时。

+1

这应该是一个评论。 – 2014-09-05 14:52:10

+0

即使我没有实现鼠标移动,我仍然没有得到想要的效果,而只是将它移动超过200px一次。见[这里](http://jsfiddle.net/linddss/eoyd9tnq/)。 – linddss 2014-09-05 14:54:22

4

试试这个jsFiddle

这会,上next悬停,开始往容纳divwidth动画。当你退出时,它会停止。在prev悬停将开始动画到0,当你将鼠标移出它将停止。

$('#next').hover(function() { 
    $('#sliderWrapper').animate({scrollLeft: $(this).siblings("#sliderWrapper").width()}, 5000); 
}, function() { 
    $('#sliderWrapper').stop(); 
}); 

$('#prev').hover(function() { 
    $('#sliderWrapper').animate({scrollLeft: 0 }, 5000); 
}, function() { 
    $('#sliderWrapper').stop(); 
}); 
+0

也可以,谢谢! – linddss 2014-09-05 15:00:47