JQuery SlideDown SlideUp 鼠标悬停 鼠标悬停

Question

我想做的是将视频保留在 .slideDown 中，直到鼠标移出文本和视频，这可能吗？这是我到目前为止的代码

#text 和 #video 都是 div

这里是JS:

<script> 
 $(document).ready(function(){
  $("#text").mouseover(function(){
   $("#video").slideDown("slow");
  });
  $("#video").mouseout(function(){
   $("#video").slideUp("slow");
  });
 });
</script>

CSS 在这里:

#text
{
margin-top:20px;
float:center;
font:VNF-Museo;
font-size:40px;
color: #333;
margin-left:auto;
margin-right:auto;
}

#video
{
display:none;
width:1024px;
height:278px;
}

我寻找解决方案，但找不到接近的解决方案。 谢谢

Answer 1

我不是 100% 确定这就是您想要做的，但我希望它有帮助:

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

#text {
  margin-top: 20px;
  float: center;
  font: VNF-Museo;
  font-size: 40px;
  color: #333;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid #000;
}

#video {
  display: none;
  width: 1024px;
  height: 278px;
  border: 1px solid #000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="wrap">
  <div id="text">text</div>
  <div id="video">video</div>
</div>

另一个例子:http://jsfiddle.net/ZyUYN/