Javascript: Div слайд вниз на другом div

Question

В этом jsfiddle я хотел бы, чтобы div «#video» полностью сместился и остался до тех пор, пока мышь не закончится над «#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); 
} 

Jscript:

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

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

Answer 1

когда #video скользит вниз, он приходит на #wrap так указатель мыши становится на #video том $("#wrap").mouseout запускается

Попробуйте это:

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

Answer 2

использование MouseEnter и MouseLeave вместо этого. Он будет обрабатывать напыление пузырьков (https://api.jquery.com/mouseenter/)

Answer 3

Функции mouseover() и mouseout() вызываются непрерывно, когда мышь перемещается. Попробуйте вместо этого используя mouseenter() и mouseout() так, что событие только один раз выстрелил:

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

Вот ссылка на an updated JSFiddle.

Answer 4

Используйте hover события вместо mouseover и mouseout, ваш mouseover прибудет срабатывает много раз, когда мышь перемещается внутри div #wrap

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

fiddle

Answer 5

Когда #video ДИВ прикрывает #wrap DIV, это вызывает событие MouseOut. Одним из вариантов является использование третьего DIV пропускающих выше как #video и #wrap и использовать, чтобы вызвать события:

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

Вот обновленный рабочий код: http://jsfiddle.net/tf4qhoxs/