Why am I having an intermittent issue while hovering too quickly?

Question

I'm having an issue as the element is not being hidden if I hover over the element quickly. It works the way I intended if I hover slowly/normally. Here's my 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');
});

And here's my 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: I'm sure I've made a mess with my jQuery and there must be a way to make it shorter/neater/tidier, and suggestions will be much appreciated ;)

Answer 1

stop all previously queued animation before starting a new one, for exmaple:

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

Answer 2

I think that it's better first put your img in a <a id="" href=""><img/></a> , So for example you can write this code:

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