Javascript: Div slide down on another div

Question

In this jsfiddle, I would like the "#video" div to slide down completely and stay until the mouse is over "#wrap". But its going up and down even though the mouse is on #wrap. Any idea?

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

Jscript:

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

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

Answer 1

Use the hover event instead of mouseover and mouseout , your mouseover get triggered many times as the mouse moves inside the div #wrap

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

fiddle

Answer 2

use mouseenter and mouseleave instead. It will handle the mouseover bubbling ( https://api.jquery.com/mouseenter/ )

Answer 3

The mouseover() and mouseout() functions are called continuously when the mouse is moving. Try instead using mouseenter() and mouseout() so that the event is only fired once:

$("#wrap").mouseenter(function() {
    $("#video").slideDown("slow");
});
$("#wrap").mouseleave(function() {
    $("#video").slideUp("slow");
});

Here's a link to an updated JSFiddle .

Answer 4

when #video slides down, it comes on #wrap so mouse pointer becomes on #video then $("#wrap").mouseout is triggered

Try this:

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

Answer 5

When your #video div covers up the #wrap div, it triggers the mouseout event. One option is to use a third see-through div above both #video and #wrap and use that to trigger the events:

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

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

Here's the updated working code: http://jsfiddle.net/tf4qhoxs/