Jquery scrollLeft hover

Question

Comment puis-je modifier le code ci-dessous de sorte que le défilement div est continuellement en vol stationnaire? En ce moment je l'ai à 120px, ce qui me force à remettre ma souris sur le bouton suivant à chaque fois que le défilement s'arrête. Je veux que la div défile à basse vitesse si la souris est sur le bouton suivant. Voici le jsFiddle

http://jsfiddle.net/mdanz/nCCRy/14/

$(function() { 

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

});

Answer 1

https://developer.mozilla.org/en/DOM/window.setInterval.

$(function() { 

    var timeoutID = null; 

    $('#next-button').hover(function() { 
     if(timeoutID == null) { 
      timeoutID = window.setInterval(startAnimate, 2000); 
     } 
    }); 

    $("#next-button").mouseout(function() { 
     window.clearInterval(timeoutID); 
     timeoutID = null; 
    }); 
}); 

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

Answer 2

Je viens de trouver une solution à votre problème. Voici le code:

$('#next-button').hover(function() { 
    $('#display-container').each(function() { 
     var item = $(this)[0]; 
     $(this).animate({ scrollLeft: item.scrollWidth }, 500); 
    }); 
}); 

Answer 3

déjà répondu à: Scroll on hover, click for speed

changer juste à scrollLeft au lieu de scrollTop. Astuce: pour avoir un effet de défilement plus lisse, définissez un intervalle plus court.

var interval; 
 
var count; 
 

 
$('.yourButton').on('mouseover', function() { 
 
    var div = $('.yourScrollElementBox'); 
 

 
    interval = setInterval(function() { 
 
     count = count || 1; 
 
     var pos = div.scrollLeft(); 
 
     div.scrollLeft(pos + count); 
 
    }, 10); 
 
    }).on('mouseout', function() { 
 
    // Uncomment this line if you want to reset the speed on out 
 
    // count = 0; 
 
    clearInterval(interval); 
 
    });