jQuery 在悬停另一个元素时显示/隐藏元素

Question

我有以下 HTML 作为示例:

<div id="header">
<div class="pagination"></div>
</div>

以及以下 jQuery，默认情况下应隐藏分页，但当用户将鼠标悬停在标题上时将其淡入，然后在用户移出标题时将其淡出:

            $(".pagination").hide();
            $("#header").mousemove(function()
            {
                $(".pagination").fadeIn(1500);
            });
            $("#header").mouseleave(function()
            {
                $(".pagination").fadeOut(1500);
            });

我遇到的问题是，它运行代码的次数与用户悬停标题的次数相同，因此，例如，如果我连续悬停 5 次，分页将淡入和淡出 5 次。这不是我想要的功能，而是当用户将鼠标悬停在标题上时简单的淡入和淡出。

有人可以帮忙吗？谢谢。

Answer 1

已编辑:添加了一些代码以避免重复淡入和淡出。

     var running = false;

     $("#header").hover(function()
        {
            if(!running){
               $(".pagination").fadeIn(1500);
               running = true;
            }
        }, function()
        {
            $(".pagination").fadeOut(1500, function(){
                running = false;
            });
        });

现在，悬停效果仅在尚未运行时才会生效。