jquery - 为什么我在悬停过快时遇到间歇性问题？

Question

我遇到了一个问题，因为如果我快速将鼠标悬停在元素上，该元素不会被隐藏。如果我缓慢/正常地悬停，它会按照我的预期工作。这是我的 jQuery：

$(".A").mouseenter(function(){
    $("#arrow").hide();
    $('.1').fadeIn('fast');
}).mouseleave(function(){
    $('.1').hide();
    $("#arrow").fadeIn('fast');
}); 

$(".B").mouseenter(function(){
    $("#arrow").hide();
    $('.2').fadeIn('fast');
}).mouseleave(function(){
    $('.2').hide();
    $("#arrow").fadeIn('fast');
}); 

$(".C").mouseenter(function(){
    $("#arrow").hide();
    $('.3').fadeIn('fast');
}).mouseleave(function(){
    $('.3').hide();
    $("#arrow").fadeIn('fast');
});

这是我的html：

<div class="three columns arrow_father">
    <img id="arrow" src="images/graph.png" alt="" />
    <img class='rec_img hidden 1' src='img1.jpg' alt='caption 3' data-caption='#htmlCaption3' />
    <img class='rec_img hidden 2' src='img2.jpg' alt='caption 3' data-caption='#htmlCaption3' />
    <img class='rec_img hidden 3' src='img3.jpg' alt='caption 3' data-caption='#htmlCaption3' />
</div>

PS：我确定我的 jQuery 搞砸了，必须有办法让它更短/更整洁/更整洁，我们将不胜感激建议；）

Answer 1

在开始一个新动画之前停止所有先前排队的动画，例如：

$("#arrow").stop(true, true).hide();
$('.1').stop(true, true).fadeIn('fast');

Answer 2

我认为最好先把你img放在 a 中<a id="" href=""><img/></a>，所以例如你可以写这个代码：

   $(document).ready(function(){
   $("#").click(function(){
   $("").show();
   });
   });