CODEWITHSUNDEEP
jqueryimagehover
JCHASE11
JCHASE11

Reputation: 3941

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

Upvotes: 1

Views: 629

Answers (2)

Vivek
Vivek

Reputation: 11028

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

Upvotes: 2

Rafay
Rafay

Reputation: 31033

try using stop(true,true) hope that helps

Upvotes: 1

Related Questions