Question

What i’m trying to do is if the mouse is over the ‘next’ button it scrolls to the right at a slow speed and if the mouse isn’t over the ‘next’ button it stops scrolling?

here is my attempt http://jsfiddle.net/mdanz/nCCRy/14/

$(function() {

$('#next-button').hover(function() {
    $('#display-container').animate({
        'scrollLeft': '+=120px'
    }, '500');
});

});

Answer 1

Check out jQuery’s .stop() method:

var $container = $('#display-container'),
    scroll = $container.width();
$('#next-button').hover(function() {
    $container.animate({
        'scrollLeft': scroll
    }, 500);
}, function(){
    $container.stop();
});

Here’s the fiddle: http://jsfiddle.net/nCCRy/17/