Question

I have a carousel that is linked to a list of items, and when you hover over each of those items, it animates a carousel to a distinct position.

The problem is if I rapidly hover over a bunch of those list items, and it will trigger the animate to each of those in the order in which they were hovered. What I want is for it to automatically adjust to whichever is the most recent hover, so that there is not a bunch of unnecessary movement going on.

Here is the jQuery for the hover:

$('#item1 a').hover(function() {
    $('#hero-slider ul').animate({
        right: '0'
    }, 500);
});
$('#item2 a').hover(function() {
    $('#hero-slider ul').animate({
        right: '980'
    }, 500);
});
$('#item3 a').hover(function() {
    $('#hero-slider ul').animate({
        right: '1960'
    }, 500);
});
$('#item4 a').hover(function() {
    $('#hero-slider ul').animate({
        right: '2940'
    }, 500);
});

If I hover over all of those items in rapid succession, it will move to all their positions before stopping.

Answer 1

try adding .stop() to the function.

 $('#carProd4 a').hover(function() {
     $('#hero-slider ul').stop().animate({
         right: '2940'
     }, 500);