CODEWITHSUNDEEP
jqueryimagehover
bingjie2680
bingjie2680

Reputation: 7773

how to prevent mouseover effect not disppearing after mouseleave

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.

Upvotes: 0

Views: 253

Answers (1)

cheeken
cheeken

Reputation: 34655

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

Upvotes: 1

Related Questions