将鼠标悬停在左右移动滑块上

Question

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

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

见fiddle。我正在尝试让滚动变为连续，同时悬停.hover（）函数无法正常工作或我认为会这样。

Answer 1

试试这个jsFiddle

这将在next悬停时开始向包含width的{​​{1}}设置动画。当你鼠标移出时，它会停止。在div悬停时，动画将开始prev，当您鼠标移开时，它将停止。

0

Answer 2

也许这可以帮到你

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 3

我建议使用鼠标反复切换事件。当鼠标移过时开始制作动画，当鼠标熄灭时停止动画制作。