jquery - 鼠标悬停时元素多次淡入/淡出

Question

我正在尝试在鼠标悬停时做一个简单的淡入淡出功能。问题是元素在预期的项目被鼠标悬停然后淡出后多次淡入和淡出。我在下面包含了我的 jquery 代码以及随附的 HTML。任何帮助将不胜感激。谢谢。

$(document).ready(function(){
        $('.claimfile-text').hide();
        $('.claimfile-graphic').mouseover(function(){
            $('.claimfile-text').fadeIn();
        }).mouseout(function(){
            $('.claimfile-text').fadeOut();
        });

    });

（索赔文件）

（悬停显示）

        <div class="claimfile-text fade-box case-text">
            <p>Claimant</p>
        </div><!-- end claimfile-text -->

Answer 1

无需查看 html 的其余部分，您将需要stop()

 $('.claimfile-text').stop().fadeIn();

这会：

描述：停止匹配元素上当前正在运行的动画。

Answer 2

你为什么不使用：

$(".claimfile-graphic").hover(function(){
  $(".claimfile-text").fadeIn();
}, function(){
  $(".claimfile-text").fadeOut();
});

Hover 包含两个事件处理程序 - handlerIn 和 handlerOut。更多 - http://api.jquery.com/hover/