JQuery slideDown slideUp mouseover mouseout
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/16231668/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JQuery slideDown slideUp mouseover mouseout
提问by Alan
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
我想要做的是将视频保留在 .slideDown 中,直到鼠标移出文本和视频,这可能吗?这是我的代码直到现在
Both #text and #video are div
#text 和 #video 都是 div
JS here:
JS在这里:
<script>
$(document).ready(function(){
$("#text").mouseover(function(){
$("#video").slideDown("slow");
});
$("#video").mouseout(function(){
$("#video").slideUp("slow");
});
});
</script>
CSS here:
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;
}
I looked for a solution but couldn't find something that close. Thank you
我寻找了一个解决方案,但找不到接近的东西。谢谢
回答by Daniel
I'm not 100% sure this is what you are trying to do, but i hope it helps:
我不是 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>
Another example: http://jsfiddle.net/ZyUYN/
另一个例子:http: //jsfiddle.net/ZyUYN/