JS 控制div 的显示和慢慢隐藏 --淡入淡出

JS 控制div 的显示和慢慢隐藏

js html 渐隐渐出

我主要是想实现一个浮动窗体，当触发某种事件后div显示出来（默认为隐藏的）,等几秒后又会隐藏，但是当鼠标进入该div后，div又一直显示，离开后才会慢慢隐藏，这该怎么实现呢，有人知道吗？？
我的代码如下:
<br> #div1 {<br> width: 200px;<br> height: 200px;<br> border: 1px solid red;<br> font-family: &quot;华为楷体&quot;;<br> display: none;<br> }<br>

function clicks() { $("#div1").show(); setTimeout(function () { $("#div1").fadeOut("slow"); }, "1000"); } function mouse() { clicks(); }

 <input type="button" id="btn1" value="确认" onclick="clicks()" />
        <div id="div1" onmouseover="mouse()">
        </div>