Question

我想要一个锚点的悬停效果，当我将鼠标悬停在链接上时，悬停的一个可以从顶部滚动，然后鼠标移出，未发现的一个可以从底部再次滚动。所以这是我的HTML代码：

<div class="viewport">
        <div class="container">
            <a class="scroll hovered" href="#">Hover Now</a>
            <a class="scroll nhover" href="#">Not Hover</a>
        </div>
    </div>

这是我的jquery代码：

        $(".container").hover(function () {
            $(this).animate({
                top: '+=22'
            }, 800, 'easeInOutBack');
        }, function () {
            $(this).animate({
                top: '-=22'
            }, 800, 'easeInOutBack');
        });

Then the final result is here

但是这里有一个问题，当我在下一个链接上快速移动鼠标时，前一个仍在滚动，我想防止这种情况发生，我想到停止功能，所以我在“。之前添加了”.stop（）“。动画“，像这样：

        $(".container").hover(function () {
            $(this).stop().animate({
                top: '+=22'
            }, 800, 'easeInOutBack');
        }, function () {
            $(this).stop().animate({
                top: '-=22'
            }, 800, 'easeInOutBack');
        });

然而结果并不像我想的那样有效，当我在链接上快速移动时，它们消失了，look at here

为什么会这样？我怎样才能解决这个问题并实现我的目标？非常感谢你！

Answer 1

尝试使用.stop(true,true)可能有帮助

      $(".container").hover(function () {
            $(this).stop(true,true).animate({
                top: '+=22'
            }, 800, 'easeInOutBack');
        }, function () {
            $(this).stop(true,true).animate({
                top: '-=22'
            }, 800, 'easeInOutBack');
        });

这是更新后的fiddle

Answer 2

到目前为止，我发现这种问题的最佳解决方案是：jQuery Hover Intent

请参阅此处的工作示例： http://jsfiddle.net/x6aVc/2/

为什么这个jquery动画效果不能像我想的那样工作？

2 个答案: