Question

在我管理的网站中，我点击了这个样式链接，点击它下方的下拉列表，以便用户可以选择一种类型。

我让Fade工作得很完美，我遇到的问题是试图确定下拉列表是否悬空，以便我可以隐藏它，如果用户在没有输入下拉的情况下悬停在样式链接上下面列表。

因此，下拉列表淡入，用户不输入降落元素，然后元素淡出，但是，如果用户输入降落元素（同时保留点击链接触发淡入淡出）然后下拉应该一直显示，直到离开下拉元素。

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

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

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

你能做的最好的事情是

将fadein设置为显示在mouseenter上
使用setTimeout（）
将实际下拉列表设置为在mouseenter上淡入淡出，使用之前的停止（即：stop（true，true）.fadeIn（200），但在事件处理程序内部发生之前使用clearTimeout（）。
在mouseleave上将实际下拉列表设置为fadeout

实际上你应该在所有这些动画之前使用stop（true，true）。

这背后的逻辑是，如果用户将鼠标悬停在下拉列表上，下拉列表将尝试淡入淡出，从而取消排队等待发生的淡出（您添加了额外的200-300秒计时器）。

另一种方法是将下拉列表嵌入父标记中，所以当你在下拉列表中盘旋时，它无论如何都不会消失（这也适用于纯CSS）

jQuery：FadeIn / FadeOut时序问题

1 个答案: