jquery：fadein / fadeout时序问题

StackOverflow https://stackoverflow.com/questions/8418012

  •  29-10-2019
  •  | 
  •  

题

在我管理的网站中，我拥有这个样式链接，在它下面的下拉列表中单击渐渐取消，以便用户可以选择一个类型。

我有褪色工作完美，我正在运行的问题正在尝试确定下拉列表是否徘徊在那里，如果用户在不进入下降的情况下悬停在风格链接中的情况下可以隐藏它下列表。

所以，下拉列表逐渐消失，用户未进入下降滴元素，然后元素逐渐消失，但是，如果用户进入下拉滴元素（在离开点击链接时触发Fadein的单击链接）然后下降应保持在留下下拉元素之前保持所示。

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

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

有帮助吗？

解决方案

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

你可以做的最好的事情是

  • 将Fadein设置为出现在MouseEnter 上
  • 使用settimeout（）延迟〜300-400ms
  • 设置实际下拉目以在MouseEnter上逐渐逐渐消失，使用前一站式（即：停止（true，true）.fadein（200），但在事件处理程序内发生之前使用cleartimeout（）。
  • 将实际下拉列表设置为mouseave的fadeout

    实际上，您应该在所有这些动画之前使用停止（真实的，真实）。

    背后的逻辑是，如果用户悬停在下拉目上，则下拉会尝试逐渐消失，从而取消排队的Fadeout（您添加了额外的200-300SEC定时器）。

    另一种方法是这样做的，它是蜂窝中的下拉目，所以虽然你在下拉下拉下面徘徊，但无论如何都不会逐渐消失（这也适用于纯CSS）

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top