2

在我正在管理的一个站点中，我有这个样式的链接，单击它会在它下面的下拉列表中淡入淡出，以便用户可以选择一个流派。

我的淡入淡出效果很好，我遇到的问题是试图确定下拉列表是否悬停，以便如果用户悬停在样式链接之外而不进入下拉列表，我可以隐藏它。

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

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

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

1 回答 1

1

结构非常有问题。为什么在鼠标离开时添加侦听器？

你能做的最好的事情是

  • 将淡入淡出设置在 mouseenter 上
  • 使用 setTimeout() 在 mouseleave 上设置淡出，延迟约 300-400 毫秒
  • 将实际的下拉菜单设置为在 mouseenter 上淡入淡出，在此之前使用停止（即：stop(true,true).fadeIn(200)，但在事件处理程序内部发生这种情况之前使用 clearTimeout()。
  • 将实际下拉菜单设置为在 mouseleave 上淡出

实际上，您应该在所有这些动画之前使用 stop(true,true) 。

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

另一种方法是将下拉菜单嵌套在父标签内，因此当您将鼠标悬停在下拉菜单中时，它无论如何都不会消失（这也适用于纯 css）

于 2011-12-07T15:47:03.723 回答