CODEWITHSUNDEEP
javascriptjquerycss
linddss
linddss

Reputation: 83

Hover to move slider left and right

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

Upvotes: 0

Views: 2215

Answers (3)

adrxlm
adrxlm

Reputation: 96

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]

Upvotes: 4

Tom
Tom

Reputation: 7740

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

Upvotes: 4

David
David

Reputation: 3763

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.

Upvotes: -2

Related Questions