Fade image in and out on Jquery hover

I am using a very basic jquery script to show an image on hover (as shown below):

HTML:

<li>
    <div class="block">
      <div class="drag"></div> (display:none in css)
    </div>
</li>

<li>
    <div class="block">
      <div class="drag"></div>
    </div>
</li>

....many more list items with same format. The Jquery Is:

$(".block").hover(function(){
      $(this).find(".drag").stop().fadeIn(250);                
  }, function(){
      $(this).find(".drag").stop().fadeOut(250);
});

Although this works, it is not working VERY well. Randomly, some .block divs don't show the image, and some don't fad开发者_运维技巧e it in completely. This happens randomly....although the overall effect works. Any ideas on why this is happening, or a better way to write this script?

you can refer this tutorial to know how stop can be use in different ways...use of stop()

the most appropriate way for your condition is ...

$(".block").hover(function(){
  $(this).find(".drag").stop(true,true).fadeIn(250);                
}, function(){
  $(this).find(".drag").stop(true,true).fadeOut(250);
});

try using stop(true,true) hope that helps