Posted in Javascript onFebruary 28, 2015
本文实例讲述了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,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;} .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> <div class="all"> <ul> <li>第一项</li> <li>第二项</li> <li>第三项</li> </ul> </div> <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程序设计有所帮助。
jQuery实现菜单感应鼠标滑动动画效果的方法
- Author -
shichen2014声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@