Question

I am trying to do mouseover and show thumb effect, this is the example code:

<ul>
   <li><a href="">testing</a></li>
   <li><a href="">testing</a></li>
   <li><a href="">testing</a></li>
   <li><a href="">testing</a></li>
   <li><a href="">testing</a></li>
   <li><a href="">testing</a></li> 
   <img class="img" src="http://jsfiddle.net/img/logo.png" style="display:none">
</ul>

Js script:

$('li').hover(
  function(e){
    $('.img').css({
        'position':'absolute',
        'left': e.pageX,
        'top': e.pageY
    }).fadeIn();
},
  function(e){
    $('.img').hide();
});

the demo can be viewed here: http://jsfiddle.net/8zG2Q/2/,

the problem is when mouse over the item quickly, the image does not hide after mouse leaves all the items. I have tried use show() instead of fadeIn(), but this does not help because I load the image from server, it takes time to be visible.

so what could be a nice solution to hide the image whenever mouse is out of all itmes? thanks for help.

Answer 1

Before calling fadeIn(), stop the animation (optionally clearing the queue and also jumping to the end of the animation) then hide the element (resetting to the ‘base state’), like so:

$('li').hover(
  function(e){
    $('.img').css({
        'position':'absolute',
        'left': e.pageX,
        'top': e.pageY
    }).stop(true,true).hide().fadeIn();
},
  function(e){
    $('.img').hide();
});