jQuery 鼠标滑过执行一个函数，当鼠标在某元素上多次快速的滑过，鼠标离开，函数仍在执行……
mouseover()鼠标滑过执行一个方法，当鼠标在某元素上多次快速的滑过，鼠标离开，方法仍在多次执行，怎样使鼠标离开，方法停止...
mouseover()鼠标滑过执行一个方法，当鼠标在某元素上多次快速的滑过，鼠标离开，方法仍在多次执行，怎样使鼠标离开，方法停止
展开
1个回答
展开全部
添加stop()方法即可解决
看我中午写的例子：
<!DOCTYPE HTML>
<html>
<head>
<title>已测春差试，都可以显示</title>
<meta charset=UTF-8 />
<style type="text/css">
.menu {
position: relative;
width: 100%;
height: 50px;
background: #efefef;
z-index: 999;
}
.menu .nav {
position: relative;
width: 100%;
height: 50px;
/* left:50%;
margin-left:-500px; */
}
.menu .nav li {
float: left;
font-size: 18px;
width: 140px;
}
.menu .nav li 李源a {
float: left;
display: block;
height: 50px;
padding: 0 30px;
line-height: 50px;
color: #333;
text-decoration: none;
position: relative;
overflow: hidden;
transition: 0.5s ease;
-webkit-transition: 0.5s ease;
}
.menu .nav li a:hover,.menu .nav li a.current {
background: #8ecb8d;
color: #fff;
}
.menu .nav li .box {
width: 100%;
height: 35px;
position: absolute;
top: 50px;
/* left: 203px;
*left: 198px;
left: 198px\0; */
background-color: rgba(0, 0, 0, 0.4) !important;
background-color:rgb(0,0,0);
filter: Alpha(opacity = 40);
display: none;
font-size: 16px;
z-index: 999;
}
.menu .nav li .box a {
display: block;
height: 35px;
color: #fff;
line-height: 35px;
border: none;
background: none;
padding: 0;
width: 114px;
text-align: center;
}
.menu .nav li .box a:hover {
text-decoration: underline;
color: #8ecb8d;
}
ul {
list-style: none;
}
</style>
<script type="text/javascript" src="jquery-1.8.0.min.js"哪森态></script>
<script type="text/javascript">
jQuery (function ($)
{
$ (".menu .nav li").hover (function ()
{
$(this).find ("a").addClass ("current").end().find (".box").stop().slideDown (140);
},function ()
{
$(this).find ("a").removeClass ("current").end().find (".box").stop().slideUp (140);
});
})
</script>
</head>
<body>
<div class="menu">
<ul class="nav">
<li><a href="#">网站首页</a></li>
<li><a href="#">概况介绍</a>
<div class="box">
<a href="#">院系简介</a> <a href="#">机构设置</a> <a href="#">现任领导</a>
</div></li>
<li><a href="#">党建工作</a>
<div class="box">
<a href="#">支部设置</a> <a href="#">党员教育</a> <a href="#">书记信箱</a> <a href="#">荣誉奖励</a>
</div></li>
<li><a href="#">教学工作</a>
<div class="box">
<a href="#">专业设置</a> <a href="#">师资队伍</a> <a href="#">实习基地</a> <a href="#">教学成果</a>
</div></li>
<li><a href="#">教学资源</a>
<div class="box">
<a href="#">教材专著</a> <a href="#">重点课程</a> <a href="#">主干课程</a>
</div></li>
<li><a href="#">科研工作</a>
<div class="box">
<a href="#">科研课题</a> <a href="#">科研论文</a> <a href="#">科研条件</a>
</div>
<li><a href="#">招生就业</a>
<div class="box">
<a href="#">招生情况</a> <a href="#">就业概况</a> <a href="#">就业信息</a>
</div>
<li><a href="#">联系交流</a>
<div class="box">
<a href="#">合作交流</a> <a href="#">系友通讯</a> <a href="#">对外服务</a>
</div></li>
</ul>
</div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
