Unbind hover event on a set of img

Question

I have a problem with a set of images. My aim is to show an related-image when you hover a thumbnail, and hide it when you roll out the image. The problem is that I need to put an delay() on the hover beacuse of the design of the module, having 3 columns, it's quite difficult to reach the images in the middle column. This delay makes the hover is queued, showing others images-related to the other thumbs you hovered. 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 the 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 that the solution comes from putting an unbind()... Thanks.

score 1 · Answer 1 · answered Dec 23 '11 at 13:19

1

use setTimeout() to cause a delay. setTimeout returns a unique id and using this id you can call clearTimeout(id) and clear the timer on mouseout.

answered Dec 23 '11 at 13:19

Rishabh

1,185
1
12
28

the solution proposed by @Emre Erkan uses an setTimeout, but it does not work, could you please be more specific? Thanks! – Manu Dec 23 '11 at 13:32
the solution proposed by @Emre Erkan wont work as the variable timeout is not cleared on mouseout, moreover you should create an array with a unique attr of each image as the key of the array and then and store the timeout ids as values. will try to create a dummy code and update soon. – Rishabh Dec 26 '11 at 06:16

score 1 · Accepted Answer · answered Dec 23 '11 at 13:33

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

Javascript (requires jQuery 1.7)

$(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 it working here: http://jsfiddle.net/aX836/

score 0 · Answer 3 · answered Dec 23 '11 at 13:20

0

Try this:

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

answered Dec 23 '11 at 13:20

Emre Erkan

8,433
3
48
53

does not work... it keeps "saving" the others hover events I made – Manu Dec 23 '11 at 13:31

Unbind hover event on a set of img

3 Answers3