创建一个知道鼠标来自哪里的div,包括高鼠标速度边缘情况

Question

JSBin:http://jsbin.com/IwoDahe/1/edit？html,css,js,output

上下文

我正在尝试创建一个"智能"div,它知道鼠标来自哪里,并从那一侧滑动信息.退出时,它应该在退出的方向上滑动信息.

当鼠标移动缓慢时,这非常容易,因为您可以使用.hover()和.slideToggle()来有效捕获和操纵鼠标移动.

但是,当用户非常快地移动鼠标时,slideToggle()函数会在动画时阻止mouseleave的侦听器.(这意味着即使在mouseleave之后,信息仍然会留在div中.)我已经使用了CSS:hover pseudoselector,但我仍然遇到了一个问题:

问题

当鼠标输入的一侧与鼠标最后退出的一侧不同时,信息从退出的一侧滑入,而不是从输入的一侧滑入.看看JSBin,如果我说的话听起来像完全胡言乱语.

我的想法是,在mouseenter上,将信息div移动到它应该进入的一侧,然后应用伪选择器.问题是,CSS伪选择器比JS更快.

测试

准备:在JSBin中扩展屏幕,使div形成4square.

它不工作时:从顶部输入div.信息滑下来.向左出口.信息幻灯片左.从顶部进入.信息将从左侧向下滑动.此外,是的甚至初始入口是错误的.

它正在工作时:从左侧输入div.信息从左侧滑入.退出顶部.信息滑起来.从左边重新进入.信息从左边再次滑动.

Answer 1

我会通过检查父级是否悬停并更改开关效果（如果是）来做到这一点

switch (slideDirection) {
    case 'top':
        if (parent.is(':hover')) 
            info.css({
                'left': 0,
                'top': -200
            }).stop().animate({
                'left': 0,
                'top': 0
            })
        else 
            info.stop().animate({
                'left': 0,
                'top': -200
            })
        break;
    case 'right':
        if (parent.is(':hover')) 
            info.css({
                'left': 200,
                'top': 0
            }).stop().animate({
                'left': 0,
                'top': 0
            })
        else 
            info.stop().animate({
                'left': 200,
                'top': 0
            })
        break;
    case 'bottom':
        if (parent.is(':hover')) 
            info.css({
                'left': 0,
                'top': 200
            }).stop().animate({
                'left': 0,
                'top': 0
            })
        else 
            info.stop().animate({
                'left': 0,
                'top': 200
            })
        break;
    case 'left':
        if (parent.is(':hover')) 
            info.css({
                'top': 0,
                'left': -200
            }).stop().animate({
                'left': 0,
                'top': 0
            })
        else 
            info.stop().animate({
                'left': -200,
                'top': 0
            })
        break;
}

（个人偏好优于 jsBin）。抱歉，代码有点乱，等有时间我会清理一下

编辑

我遇到了这种方法的一些很棒的替代方案：

• 这个演示展示了如何将 jQuery 与 CSS 转换结合起来实现非常相似的效果，甚至可能更强大的效果
• 这是一个纯 CSS 版本（很棒），但它没有留下与鼠标相同的方向