在一组 img 上取消绑定悬停事件

Question

我对一组图像有疑问。我的目标是在您悬停缩略图时显示相关图像，并在展开图像时隐藏它。问题是由于模块的设计，我需要在悬停上放置一个延迟（），有 3 列，很难到达中间列中的图像。此延迟使悬停排队，显示与您悬停的其他拇指相关的其他图像。这是标记：

<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>

这是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');
    });
});

我认为解决方案来自于放置一个 unbind()... 谢谢。

Answer 1

我将 .tn 类添加到缩略图中，但您可以根据需要将其更改为您的 .eq 解决方案。

Javascript（需要 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();
        }
    });

});

看到它在这里工作： http://jsfiddle.net/aX836/

Answer 2

使用setTimeout() 导致延迟。 setTimeout 返回一个唯一的 id，您可以使用此 id 调用 clearTimeout(id) 并在 mouseout 时清除计时器。

Answer 3

试试这个：

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