Javascript jQuery.show/.hide被多次触发
我有一个有4个平铺的页面,当鼠标悬停在上面时,它会显示两个选项:新表单和表单列表 但是,我希望隐藏这两个选项,除非用户当前悬停在互动程序上。这工作正常,但在第一次悬停事件后会执行2到3次。基本上,在页面加载时,这两个选项是隐藏的,并显示平铺。将鼠标悬停到第一个互动程序中后,将使用Javascript jQuery.show/.hide被多次触发,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我有一个有4个平铺的页面,当鼠标悬停在上面时,它会显示两个选项:新表单和表单列表 但是,我希望隐藏这两个选项,除非用户当前悬停在互动程序上。这工作正常,但在第一次悬停事件后会执行2到3次。基本上,在页面加载时,这两个选项是隐藏的,并显示平铺。将鼠标悬停到第一个互动程序中后,将使用.show()方法显示这两个选项。如果鼠标离开互动程序,则调用.hide()方法隐藏这两个选项 但是,如果我将鼠标悬停回同一个互动程序中,它会执行.hide()和.show()两次,有时甚至更多。我假设我在做一些愚蠢的事
.show()
方法显示这两个选项。如果鼠标离开互动程序,则调用.hide()
方法隐藏这两个选项
但是,如果我将鼠标悬停回同一个互动程序中,它会执行.hide()
和.show()
两次,有时甚至更多。我假设我在做一些愚蠢的事情,但在网上找不到任何帮助。可以在此处找到JSFIDLE:
代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
.container
{
height: 150px;
text-align:center;
}
.FormTiles
{
position: relative;
text-align: center;
vertical-align: middle;
float:left;
width: 150px;
height: 0px;
margin-left: auto;
margin-right: auto;
background-color: green;
color: white;
display: inline;
font-family: Verdana;
font-size:small;
margin-right: 5px;
padding-bottom: 150px;
}
#optionsContainer, #optionsContainer1, #optionsContainer2, #optionsContainer3
{
position: absolute;
width: 100%;
text-align: center;
bottom: 0;
background-color: gray;
padding-top: 3px;
padding-bottom: 3px;
display: none;
}
</style>
</head>
<body>
<div class="container">
<div class="FormTiles" id="workForInspector">Work For Inspector Form
<div id="optionsContainer">
<div class="FormTilesNewForm">New Form</div>
<div class="FormTilesToList">Form List</div>
</div>
</div>
<div class="FormTiles" id="Form2">Form 2
<div id="optionsContainer1">
<div class="FormTilesNewForm">New Form</div>
<div class="FormTilesToList">Form List</div>
</div>
</div>
<div class="FormTiles" id="Form3">Form 3
<div id="optionsContainer2">
<div class="FormTilesNewForm">New Form</div>
<div class="FormTilesToList">Form List</div>
</div>
</div>
<div class="FormTiles" id="Form4">Form 4
<div id="optionsContainer3">
<div class="FormTilesNewForm">New Form</div>
<div class="FormTilesToList">Form List</div>
</div>
</div>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#workForInspector").hover(function () {
$("#optionsContainer").show("fast");
});
$("#workForInspector").mouseout(function () {
$("#optionsContainer").hide("fast");
});
});
</script>
</body>
</html>
容器
{
高度:150像素;
文本对齐:居中;
}
.FormTiles
{
位置:相对位置;
文本对齐:居中;
垂直对齐:中间对齐;
浮动:左;
宽度:150px;
高度:0px;
左边距:自动;
右边距:自动;
背景颜色:绿色;
颜色:白色;
显示:内联;
字体系列:Verdana;
字体大小:小;
右边距:5px;
填充底部:150px;
}
#选项容器、#选项容器1、#选项容器2、#选项容器3
{
位置:绝对位置;
宽度:100%;
文本对齐:居中;
底部:0;
背景颜色:灰色;
垫面:3件;
垫底:3件;
显示:无;
}
检查员工作表
新形式
表格清单
表格二
新形式
表格清单
表格三
新形式
表格清单
表格四
新形式
表格清单
$(文档).ready(函数(){
$(“#workForInspector”)。悬停(函数(){
$(“#选项容器”).show(“快速”);
});
$(“#workForInspector”).mouseout(函数(){
$(“#选项容器”).hide(“快速”);
});
});
使用jQuery的.stop()
函数停止鼠标移动排队:
$("#workForInspector").hover(function () {
$("#optionsContainer").stop().show("fast");
}, function () {
$("#optionsContainer").stop().hide("fast");
});
使用jQuery的.stop()
函数停止鼠标移动排队:
$("#workForInspector").hover(function () {
$("#optionsContainer").stop().show("fast");
}, function () {
$("#optionsContainer").stop().hide("fast");
});
谢谢!结果是我把它的结构弄错了。改变了我的结构,使之与你的结构相匹配,效果很好。也不需要
.stop()
。将标记为答案!非常感谢。结果是我把它的结构弄错了。改变了我的结构,使之与你的结构相匹配,效果很好。也不需要.stop()
。将标记为答案!