JQuery slideDown slideUp mouseover mouseout

Question

what I'm trying to do is to keep video in .slideDown until mouseout text AND video, is that possible? here's my code until now

Both #text and #video are div

JS here:

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

CSS here:

#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;
}

I looked for a solution but couldn't find something that close. Thank you

Answer 1

I'm not 100% sure this is what you are trying to do, but i hope it helps:

$(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>

Another example: http://jsfiddle.net/ZyUYN/