Javascript:div在另一个div上向下滑动

Question

在这个jsfiddle中，我希望“#video”div完全向下滑动并停留到鼠标位于“#wrap”上。但即使鼠标位于#wrap 上，它也会上下移动。有什么想法吗？

html:

<div id="wrap">
<div id="text">text</div>
<div id="video">video</div>
</div>

CSS:

#text
{
position: absolute;
top:20px;
width: 300px;
height: 200px;
background: #FAAC58;
margin-left:auto;
margin-right:auto;
}

#video
{
position: absolute;
top:20px;
width: 300px;
height: 200px;
display:none;
background: rgba(0,0,0,0.8);
}

J脚本:

$(document).ready(function(){
    $("#wrap").mouseover(function(){
    $("#video").slideDown("slow");
         });
    $("#wrap").mouseout(function(){
    $("#video").slideUp("slow");
         });
});

http://jsfiddle.net/ZyUYN/1045/

Answer 1

使用 hover 事件而不是 mouseover 和 mouseout，您的 mouseover 会在鼠标移动时被触发多次在 div 内移动 #wrap

$(document).ready(function () {
    $("#wrap").hover(function () {
        $("#video").slideDown("slow");
    }, function () {
        $("#video").slideUp("slow");
    });
});

fiddle