当前位置：首页 → 问答吧 → 关于mouseover和mouseout响应jQuery动画的问题(已解决)

关于mouseover和mouseout响应jQuery动画的问题(已解决)

时间：2010-02-02

来源：互联网

问题描述
导航条中，需要用到mouseover事件，鼠标移动到某个菜单上，动态的展现出子菜单(用的是jQuery中的show函数)，鼠标移开后，则动态hide子菜单。问题是当鼠标移动到正在展现过程中的子菜单时候，居然会调用mouseout过程，导致动态展现异常。经试验，如果直接使用css的display属性来控制显示和隐藏，没有该问题。鼠标放到子菜单中，移动过程中不会触发mouseout事件，如果采用js的setInterval的方法实现的动画展现，也不会出现该问题，仅仅在jQuery中出现，有何方法解决。

代码如下
html

复制代码

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>导航条</title>
<style type="text/css">
@import url(style.css);
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="customer.js"></script>
</head>
<body>
<ul class="menu3">
<li>
<a href="#" class="menubutton">MENU1</a>
<div class="submenu">
<a href="#">submenu1</a>
<a href="#">submenu2</a>
<a href="#">submenu3</a>
<a href="#">submenu4</a>
<a href="#">submenu5</a>
</div>
</li>
</ul>
</body>
</html>

CSS

复制代码

/*===================== 菜单三 =====================*/
.menu3{
width:800px;
}
.menu3 li{
float:left;
width:159px;
height:30px;
position:relative;
text-align:left;
border-right:1px solid #FFFFFF;
}
.menu3 .menubutton{
padding-top:8px;
height:22px;
background-color:#006699;
width:100%;
display:block;
clear:both;
color:#FFFFFF;
text-align:center;
font-weight:600;
}
.menu3 .submenu{
position:absolute;
width:800px;
background-color:#CCCCCC;
padding-top:5px;
display:none;
}
.menu3 .submenu a{
display:block;
width:120px;
float:left;
height:20px;
padding-top:6px;
text-align:center;
background-color:#999999;
color:#FFFFFF;
border-right:1px solid #FFFFFF;
}

jQuery操作文件

复制代码

$(document).ready(function(){
//菜单三
$(".menu3 li")
.mouseover(function(){
$(this).children(".menubutton").css("background-color","#CCAA11");
$(".menu3 .submenu").css("display","none");
$(this).children(".submenu").show(500);
})
.mouseout(function(){
$(this).children(".menubutton").css("background-color","");
});
});

[ 此帖被神之左手在2010-02-03 11:04重新编辑 ]

作者: 神之左手发布时间: 2010-02-02

第一次触发完了，去掉over的绑定，等over之后再绑定回来

作者: ywqbestever 发布时间: 2010-02-02

正解！
经测试可以达到目的了。
js部分代码如下
[code]
$(document).ready(function(){
    //菜单三
   $(".menu3 li")
        .mouseover(function(){
            M_over($(this));
        })
        .mouseout(function(){
            $(this).children(".menubutton").css("background-color","");
        });
});

//菜单三鼠标over效果
function M_over(obj){
    obj.children(".menubutton").css("background-color","#CCAA11");
    $(".menu3 .submenu").css("display","none");
    $(".menu3 li").mouseover(function(){
        M_over($(this));
    });
    obj.children(".submenu").show(500);
    obj.unbind("mouseover");
}
[\code]

在调整过程中，一开始把重新绑定的语句放在mouseout事件里，导致依然会有问题，最终放在了mouseover事件中，完美解决。可见mouseout的逻辑其实不一定要在mouseout事件中产生。

作者: 神之左手发布时间: 2010-02-03

关于mouseover和mouseout响应jQuery动画的问题(已解决)

热门阅读

热门下载