利用JS和CSS如何实现div1和具有滑动出场效果的div2互联？

Question

要实现的效果：
初始化，div2不显示，只显示div1。鼠标进入div1，那么div2显示（出现效果为下拉动画jQuery中表现为（$("#div2").slideDown(500）；如果鼠标从div1进入div2，div2保持不变。如果鼠标离开div1并且不进入div2，div2消失（最好有缓慢消失效果）。如果鼠标从div2进入div1，div2不变（div2不产生任何变化）；如果鼠标从div2离开并且不进入div1，div2消失（最好有缓慢消失效果（$("#div2").slideUp(500)））

div1 和div2 是相互独立的，

原本想问的就是这个问题，上一个问题没有把关键点（具有动画效果）说清楚，给大家造成不便请谅解。

Answer 1

html

 <div id="div1" style="background: aqua;width: 50px;height: 50px;">

                </div>
                <div id="div2" style="background: navy;width: 100px;height: 100px;"">

                </div>

js

 $("#div1").mouseenter(function(e){
                $("#div2").slideDown(500);
                $("#div1").mouseleave(function(e){
                    var array = new Array();
                    array.push($("#div1")[0]);
                    array.push($("#div2")[0]);
                    var flag = checkIn(e,array)
                    if (!flag) {
                        $("#div2").slideUp(500);
                    }
                });
                $("#div2").mouseenter(function(e){
                    $("#div2").mouseleave(function(e){
                        var array = new Array();
                        array.push($("#div1")[0]);
                        array.push($("#div2")[0]);
                        var flag = checkIn(e,array)
                        if (!flag) {
                            $("#div2").slideUp(500);
                        }
                    });
                });
            });
            function checkIn(e,objs){
                try {
                    console.log(objs.length);
                } catch (e) {
                    alert(1);
                }

                var x = e.clientX;
                var y = e.clientY;
                for (i = 0; i < objs.length; i++) {
                    var obj = objs[i];
                    if (x > obj.offsetLeft && x < (obj.offsetLeft + obj.clientWidth) && y > obj.offsetTop && y < (obj.offsetTop + obj.clientHeight)) {
                        return true;
                    } else {
                    }
                }
                return false;
            }

初始化隐藏效果我没写，你自己加上就好