如何用JQuery做这样的效果
发布网友
发布时间：2022-04-25 15:32
共2个回答
热心网友
时间：2022-04-22 23:27
onmouseover=显示函数
onmouseout=隐藏函数
（隐藏函数你可以设置延时如500ms，这样便不会立即隐藏）
timeout = setTimeout(function(){/* 这里设置隐藏的代码 */},500);
当鼠标离开1层但是没有进入2层的时候，500ms之后 2层就消失
对于层2
onmouseover=显示函数
{
进入显示函数后，便立即清除timeout；这样在离开1层500ms内
隐藏函数不会立即执行，在其执行前取消掉。
clearTimeout(timeout);
}
onmouseout=隐藏函数
（隐藏函数你也可以设置延时如500ms，这样便不会立即隐藏）
timeout = setTimeout(function(){/* 这里设置隐藏的代码 */},500);
仅提供思路，代码你可以自己写……
<div id="myaccount">我的菜单</div>
<div id="myaccount-menu">子菜单</div>
<script>
var MyTimeout;
$(document).ready(function(){
Test();
});
function Test(){
$("#myaccount").css({
background:"#FCC",
width:120,
lineHeight:"36px"
});
//可以先藏起来
$("#myaccount-menu").css({
background:"#CFC",
height:0,
width:120,
lineHeight:"36px",
overflow:"hidden"
});
//鼠标经过myaccount的时候
$("#myaccount").bind('mousemove',function(){
try{clearTimeout(MyTimeout);}
catch(e){}
$("#myaccount-menu").animate({height:36},100);
});
$("#myaccount").bind('mouseout',function(){
//设置延迟，等200ms之后如果鼠标没有进入myaccount或者myaccount-menu，将执行隐藏
MyTimeout = setTimeout(function(){
$("#myaccount-menu").animate({height:0},100);
},200);
});
//鼠标经过myaccount-menu的时候
$("#myaccount-menu").bind('mousemove',function(){
try{clearTimeout(MyTimeout);}
catch(e){}
$("#myaccount-menu").animate({height:36},100);
});
$("#myaccount-menu").bind('mouseout',function(){
MyTimeout = setTimeout(function(){
$("#myaccount-menu").animate({height:0},100);
},200);
});
}
</script>
以上animate是设置动画效果的，如果不用，可以直接设置display:"none"/"block"
实现立即显示或者隐藏。
热心网友
时间：2022-04-23 00:45
这里有一个
可以试试看
参考资料：http://www.blueidea.com/common/shoutbox/redir.asp?6=n&id=11931
