脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-jQuery实现菜单感应鼠标滑动动画效果的方法教程，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。
jQuery实现菜单感应鼠标滑动动画效果的方法教程。本文实例讲述了jquery实现菜单感应鼠标滑动动画效果的方法。分享给大家供大家参考。具体分析如下：
此代码测试环境为IE9 以及GG、FF浏览器，IE8及以下浏览器可能不支持，希望理解。
这款JS鼠标滑动效果使用jQuery实现简单动画的方法，而且也惊喜的发现，jquery有更好的书写方法，可以连写，在aniMATE方法前加上stop方法就可实现鼠标移出后，不再执行滑动效果。
代码如下:
<!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>非常不错的jQuery鼠标滑动效果</title>
<script src="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,p,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,PRe,form,fieldset,input,textarea,p,@R_406_316@,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;}
.all ul{ width:100%; text-align:center;}
.all ul li{ width:100%; height:40px; line-height:40px; border-bottom:1px dashed #990066; cursor:pointer;}
</style>
</head>
<body>
<p class="all">
<ul>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ul>
</p>
<script type="text/javascript">
$(document).ready(function(){
$('.all ul li').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程序设计有所帮助。
觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！
以上是脚本宝典为你收集整理的javascript代码实例教程-jQuery实现菜单感应鼠标滑动动画效果的方法教程全部内容，希望文章能够帮你解决javascript代码实例教程-jQuery实现菜单感应鼠标滑动动画效果的方法教程所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。