Question

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

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

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

如果我快速连续悬停在所有这些物品上，它会在停止之前移动到所有位置。

Answer 1

尝试将.stop()添加到该函数中。

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

jQuery动画到最近的悬停

1 个答案: