如何用JavaScript实现鼠标移出Div时关闭该Div层？

需求说明 #

• 点击静态图片（.one）触发容器（.two）从页面底部滑入，滑入后鼠标处于容器上方
• 鼠标移出容器时，容器沿原路滑回页面底部
• 原点击切换逻辑存在问题：容器弹出后会覆盖触发按钮，需改为鼠标移出自动关闭

现有代码 #

var clicked=true;
$(".one").on('click', function(){
    if(clicked)
    {
        clicked=false;
        $(".two").css({"bottom": 0});
    }
    else
    {
        clicked=true;
        $(".two").css({"bottom": "-700px"});
    }
});

修改后代码 #

// 点击图片触发容器滑入
$(".one").on('click', function(){
    $(".two").css({"bottom": 0});
});

// 鼠标移出容器时触发滑回
$(".two").on('mouseleave', function(){
    $(this).css({"bottom": "-700px"});
});

逻辑说明 #

• 移除原点击切换的状态变量，点击图片直接触发容器滑入操作
• 给目标容器绑定mouseleave事件，当鼠标离开容器区域时，自动执行滑回底部的动作
• 若需要平滑滑动效果，可在CSS中给.two添加transition: bottom 0.3s ease;，让动画更自然

内容的提问来源于stack exchange，提问作者Heisenberg