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>