jQuery 仅动画到最近的 Hover

Question

我有一个链接到项目列表的轮播，当你在每个项目上 hover 时，它会将轮播动画到不同的 position。

问题是，如果我在一堆列表项上快速 hover ，它会按照它们悬停的顺序触发每个列表项的动画。 我想要的是让它自动调整到最新的 hover，这样就不会发生一堆不必要的动作。

这是 hover 的 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);
});

如果我 hover 快速连续地遍历所有这些项目，它将在停止之前移动到所有位置。

Answer 1

尝试将.stop()添加到 function。

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