Javascript jQuery仅对最近的悬停设置动画

我有一个旋转木马，它链接到一个项目列表，当您将鼠标悬停在每个项目上时，它会将旋转木马设置为一个不同的位置

问题是，如果我快速地将鼠标悬停在一堆列表项上，它将按照它们悬停的顺序触发每个列表项的动画。我想让它自动调整到最近的一次悬停，这样就不会有一堆不必要的移动

以下是悬停的jQuery：

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

如果我快速连续地将鼠标悬停在所有这些项上，它将在停止之前移动到它们的所有位置。

尝试将

.stop（）

添加到函数中

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

尝试将

.stop（）

添加到函数中

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