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 id="" href=""><img/></a>中，例如，您可以编写此代码：

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

为什么我在徘徊太快时会出现间歇性问题？

2 个答案: