javascript - jQuery:如何实现这种滚出效果？

Question

我需要一些帮助来实现这种翻转/滚出效果。

这是屏幕截图:http://dl.dropbox.com/u/72686/roll-over-out.png

我有一个菜单。当我将鼠标悬停在“产品”项上时，弹出 block 会出现在其下方，并带有包含所有产品的树。

<div id="menu">
   <div id="product"> Roll over here </div>
   ...
</div>

<div id="popup">
  <div>  <a> link </a> </div>
  <div>  <a> link </a> </div>
  <div>  <a> link </a> </div>
  ...
</div>

这个 block 有CSS:

#popup {
position:fixed
display:none
}

现在，如何实现滚动显示 block 就很清楚了:

("#product").mouseover(function() { 
                $('#popup').css("display","block");
            })

但是我该如何处理推出？我有以下问题:

1)如果我将转出添加到菜单项“#product”，当我从中转出(移动到带有产品树的弹出窗口)时，我会使最后一个消失(因为我离开菜单项)。

2)如果我向弹出窗口添加推出功能，我会与他的 child 发生问题。即，如果我将鼠标移到树的链接上，弹出窗口就会消失(因为我要离开父级#popup)。

谢谢

ps。我无法使用 :hover (Drupal CMS 上的 jquery 版本不支持它)。

Answer 1

首先我想你会发现mouseenter和 mouseleave对于这类事情来说是更好的事件。请参阅 IE 中的 jQuery 示例来了解原因，这不是一个大问题，但否则您可能最终会出现闪烁。

但是这仍然不能解决你的问题。我建议使用setTimeout来关闭菜单，然后如果鼠标在超时之前进入菜单则取消超时:

var t;
$("#product").mouseleave(function() { 
            t = setTimeOut(function(){$('#popup').hide();}, 100);
        })

$("#popup").mouseenter(function() {
    if(t)
        {
            clearTimeout(t);
            t=null;
        }});

如果您从产品元素移动到弹出元素，这将阻止弹出窗口关闭。清除超时方法可防止超时函数被执行。