Hover to move slider left and right

Question

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

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

See fiddle. I'm trying to get the scrolling to be continuous while hovering .hover() function isn't working properly or as I thought it would.

score 4 · Answer 1 · answered Sep 05 '14 at 14:56

Try this jsFiddle

This will, on the next hover, start animating towards the width of the containing div. When you mouse out, it will stop. On the prev hover will start animating to 0 and when you mouse out it will stop.

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

score 4 · Accepted Answer · edited May 23 '17 at 11:44

4

maybe this help you

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

Source: Continuous scroll on hover [performance]

edited May 23 '17 at 11:44

Community

1
1

answered Sep 05 '14 at 14:56

adrxlm

96
2

Works great thank you so much! Here's the working [fiddle](http://jsfiddle.net/linddss/88hv1hvs/)! – linddss Sep 05 '14 at 14:59
@adrxlm: my answer was wrong,i first thought your answer was same as that i answered..!! but you have answered it really well – Sajad Karuthedath Sep 05 '14 at 15:14

score -2 · Answer 3 · answered Sep 05 '14 at 14:46

-2

I would suggest using the mouse over and out events. When the mouse goes over start animating and when the mouse goes out stop animating.

answered Sep 05 '14 at 14:46

David

3,653
2
24
26

1

That should be a comment. – Wilfredo P Sep 05 '14 at 14:52
Even though I don't have mouseout implemented I still don't get the desired effect, instead it only moves it over 200px once. See [here](http://jsfiddle.net/linddss/eoyd9tnq/). – linddss Sep 05 '14 at 14:54

Hover to move slider left and right

3 Answers3