Fade image in and out on Jquery hover

Question

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 fade 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?

Answer 1

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);
});

Answer 2

尝试使用stop（true，true）希望有帮助