Disable hover event on img set

Question

I have a problem with a set of images. My goal is to show the linked image when hovering a thumbnail and hide it when the image is expanded. The problem is that I need to put a delay () on the module design hovering, which has 3 columns, it is quite difficult to achieve images in the middle column. This delay causes the hang to be queued, showing other images associated with the other thumbs that you pointed. This is the markup:

<ul id="module"> <li> <a href="#"> <img src="thumbnail-image-1.jpg"> <img src="image-1.jpg"> </a> </li> <li> <a href="#"> <img src="thumbnail-image-2.jpg"> <img src="image-2.jpg"> </a> </li> ... </ul> 

And this is js:

 $('#module li a').each(function(i){ $_imgs = $(this).find('img'); $_imgs.eq(0).mouseover(function() { $(this).next().delay(800).fadeIn('slow'); }); $_imgs.eq(1).mouseout(function() { $(this).fadeOut('slow'); }); }); 

I think the solution comes from installing unbind () ... Thanks.

Answer 1

I added the .tn class to the thumbnails, but you can change it to your .eq solution if you want.

Javascript (jQuery 1.7 required)

 $(function(){ var timeout = false; $('#module > li').on('hover', 'a', function(e){ var $elem = $(this).find('.tn'); if(e.type == 'mouseenter'){ timeout = setTimeout(function(){ $elem.fadeIn(); }, 800); } else{ timeout && clearTimeout(timeout); $elem.stop().fadeOut(); } }); }); 

See how it works: http://jsfiddle.net/aX836/

Answer 2

use setTimeout() to cause a delay. setTimeout returns a unique identifier and with this identifier you can call clearTimeout(id) and clear the timer from the mouse.

Answer 3

Try the following:

 $('#module li a').each(function(i){ var $_imgs = $(this).find('img'), timeout, $next; $_imgs.eq(0).mouseover(function() { clearTimeout(timeout); $next = $(this).next(); timeout = setTimeout(function() { $next.fadeIn('slow'); }, 800); }); $_imgs.eq(1).mouseout(function() { $(this).fadeOut('slow'); }); });