jQuery实现菜单感应鼠标滑动动画效果的方法
本文实例讲述了jQuery实现菜单感应鼠标滑动动画效果的方法。分享给大家供大家参考。具体分析如下：
此代码测试环境为IE9以及GG、FF浏览器，IE8及以下浏览器可能不支持，希望理解。
这款JS鼠标滑动效果使用jQuery实现简单动画的方法，而且也惊喜的发现，jquery有更好的书写方法，可以连写，在animate方法前加上stop方法就可实现鼠标移出后，不再执行滑动效果。
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>非常不错的jQuery鼠标滑动效果</title>
<scriptsrc="js/jquery.min.js"type="text/javascript"></script>
<style>
body{font-size:12px;font-family:Tahoma,Arial,Verdana;color:#fff;background:#000;width:100%;height:100%;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td,i{padding:0;margin:0}
fieldset,img{border:0}
.clear{clear:both;}
address,caption,cite,code,dfn,em,th,var{font-weight:normal;font-style:normal}
ol,ul{list-style:none}
caption,th{text-align:left}
h1,h2,h3,h4,h5,h6{font-size:100%}
abbr,acronym,img{border:0}
button,input,select,textarea{font-size:100%;}
input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;}
table{border-collapse:collapse;border-spacing:0;}
a{text-decoration:none;}
a:hover{text-decoration:underline;}
.clearfix:after{visibility:hidden;display:block;font-size:0;content:".";clear:both;}
.allul{width:100%;text-align:center;}
.allulli{width:100%;height:40px;line-height:40px;border-bottom:1pxdashed#990066;cursor:pointer;}
</style>
</head>
<body>
<divclass="all">
<ul>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ul>
</div>
<scripttype="text/javascript">
$(document).ready(function(){
$('.allulli').mouseover(function(){
$(this).animate({"height":"70px","line-height":"70px"},100)
}).mouseleave(function(){
$(this).stop().animate({"height":"40px","line-height":"40px"},100)
});
})
</script>
</body>
</html>
希望本文所述对大家的jQuery程序设计有所帮助。