<!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">
.art_nav{background:#000; color:#fff;}
.art_nav a{margin:0 20px;}
#drop_nav{display:none; background:#C00; color:#fff;}
</style>
<script src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function()
{
var timer=[];
jQuery(".art_navmore").mouseover(function(){
if(!jQuery(this).hasClass("hover")){
jQuery(this).addClass("hover"); jQuery(this).find("#drop_nav").stop(true,true).slideDown(230);
}
window.clearTimeout(timer[0]);
}).mouseleave(function(){
if(jQuery(this).hasClass("hover")){
var _this=this;
timer[0]=window.setTimeout(function(){
jQuery(_this).removeClass("hover");jQuery(_this).find("#drop_nav").stop(true,true).slideUp(150);
},300);
}
});
});
</script>
</head>
<body>
<div class="art_nav"><a href="" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >111</a><a href="" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >222</a><span class="art_navmore"><a href="" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >333</a><div id="drop_nav">sadasdsadasdasd</div></span></div>
</body>
</html>
可应用于菜单列表的更多弹出层。
![用jQuery实现一个简易的聊天框[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)