jQuery: FadeIn/FadeOut计时问题

Question

在我管理的一个网站上，我有这个样式的链接，点击它下面的下拉列表淡出，以便用户可以选择一个类型。

我有淡出工作完美，我遇到的问题是试图确定下拉列表是否悬停，以便我可以隐藏它，如果用户悬停在没有进入下拉列表的样式链接。

所以，下拉列表淡出，用户没有输入下拉元素，然后元素淡出，但是，如果用户输入下拉元素(同时离开触发淡出的点击链接)，那么下拉列表应该保持显示，直到离开下拉元素。

这是我到目前为止的代码:

$('#categories_link').live('click mouseleave', function(e){
    $('.categories').fadeIn(200, function(){
        $(this).live('mouseenter mouseleave', function(evnt){
            switch(evnt.type) {
                case "mouseenter":
                    $(this).stop(true, true)
                    $(this).data('visible', true)
                break;
                case "mouseleave":
                    $(this).data('visible', false)
                break;
            }
        })
        if(e.type == 'mouseleave') {
            if($('.categories').data('visible'))
                return;
            else
                $('.categories').fadeOut(200)
        }
    })
})

Answer 1

结构很有问题。为什么要在鼠标离开时添加监听器?

你能做的最好的事情就是

• 设置淡出出现在mouseenter
• 使用setTimeout()
设置mouseleave的淡出时间为300-400ms
• 设置实际的下拉菜单在鼠标进入时淡出，在此之前使用stop(即:stop(true,true). fadein(200))，但在此之前使用clearartimeout()在事件处理程序中发生。
• 设置实际的下拉菜单在mouselleave上逐渐淡出

实际上你应该在所有这些动画之前使用一个停止符(true,true)

这背后的逻辑是，如果用户将鼠标悬停在下拉菜单上，下拉菜单将尝试自行淡出，从而取消排队等待的淡出(您添加了额外的200-300秒计时器)。

另一种方法是将下拉菜单嵌套在父标签中，这样当你在下拉菜单中悬停时，它不会消失(这也适用于纯css)