Delayed jquery tooltip

Question

I wrote a very simple hint script with a preliminary delay on display.

but i have some problems with my code

I don’t want to show the tooltip too much with a hang time of less than 500 ms, but I have a blink effect due to the fadeTo () animation effect

this means that when I am on .imgSpan and then quickly turn off the mouse in less than 500 ms, the .img tag will be displayed after 500 ms and will quickly hide

here is my code

$(document).ready(function () { $('.img').css('display','none'); }); $('.imgSpan').hover( function(){ $(".imgSpan:hover .img").delay(500).fadeTo(500, 1); }, function(){ $(".img").css("display", "none"); $(".img").fadeTo(0, 0); } ); 

HTML code:

 <span class='imgSpan'> <a> <img src='/images/image.png' class='middle' /> </a> <img class='img' src='image_path' alt='image' /> 

notes:

• I do not want to lose the animation effect

• I do not want to use any plugin

Answer 1

This is due to the wrong queue.

To fix this, you can write a CSS line as follows:

 $(".img").stop(true, true).css("display", "none"); 

This will clear every selector animation and then change the CSS.

I'm not sure, but I think you can remove the second true when stopped. You just have to try it!

Answer 2

Invalid .imgSpan:hover selector.

Since you didn't mention HTML, assuming (according to the selector mentioned in the question, which is $(".imgSpan:hover .img") , i.e. a child element of .imgSpan ),

 <div class="imgSpan">Hover me <div class="img">Some</div> </div> 

Here the correct js is

 $('.img').css('display','none'); $('.imgSpan').hover(function(){ $(this).find(".img").delay(1000).fadeTo(500, 1); },function(){ $(".img").css("display", "none"); $(".img").fadeTo(0, 0); }); 

Demo here