悬停以左右移动滑块

Question

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

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

请参阅fiddle。我试图让滚动连续，而悬停.hover（）函数工作不正常或我认为会。

Answer 1

也许这可以帮助您

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]

Answer 2

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

Answer 3

试试这个jsFiddle

这会，上next悬停，开始往容纳div的width动画。当你退出时，它会停止。在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(); 
});