JQuery slideDown slideUp mouseover mouseout

Alan picture Alan · Apr 26, 2013 · Viewed 28.1k times · Source

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

Daniel picture Daniel · Apr 26, 2013

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/