本文實例講述了jQuery實現選單感應滑鼠滑動動畫效果的方法。分享給大家供大家參考。具體分析如下： 此程式碼測試環境為IE9 以及GG、FF瀏覽器，IE8及以下瀏覽器可能不支持，希望理解。 這款JS滑鼠滑動效果使用jQuery實現簡單動畫的方法，而且也驚喜的發現，jquery有更好的書寫方法，可以連寫，在animate方法前加上stop方法就可實現滑鼠移出後，不再執行滑動效果。 複製代碼 代碼如下: 非常不錯的jQuery滑鼠滑動效果 <br /> body{font-size:12px;font-family:Tahoma,Arial,Verdana;color:#fff; background:#000; width:100%; height:100%;}<br /> 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}<br /> fieldset,img {border:0}<br /> .clear{ clear:both;}<br /> address,caption,cite,code,dfn,em,th,var {font-weight:normal;font-style:normal}<br /> ol,ul {list-style:none}<br /> caption,th {text-align:left}<br /> h1,h2,h3,h4,h5,h6 {font-size:100%}<br /> abbr,acronym,img {border:0}<br /> button,input,select,textarea{font-size:100%;}<br /> input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;}<br /> table {border-collapse:collapse;border-spacing:0;}<br /> a{text-decoration:none;}<br /> a:hover {text-decoration:underline;}<br /> .clearfix:after {visibility: hidden;display: block;font-size: 0;content: ".";clear:both;}<br /> .all ul{ width:100%; text-align:center;}<br /> .all ul li{ width:100%; height:40px; line-height:40px; border-bottom:1px dashed #990066; cursor:pointer;}<br /> 第一項 第二項 第三項 <br /> $(document).ready(function(){<br /> $('.all ul li').mouseover(function(){<br /> $(this).animate({"height":"70px","line-height":"70px"},100)<br /> }).mouseleave(function(){<br /> $(this).stop().animate({"height":"40px","line-height":"40px"},100)<br /> });<br /> })<br /> 希望本文所述對大家的jQuery程式設計有所幫助。
