快捷導(dǎo)航

jQuery實(shí)現(xiàn)菜單感應(yīng)鼠標(biāo)滑動動畫效果的方法

更新時(shí)間：2015年02月28日 15:13:18 投稿：shichen2014

這篇文章主要介紹了jQuery實(shí)現(xiàn)菜單感應(yīng)鼠標(biāo)滑動動畫效果的方法,實(shí)例分析了jQuery中鼠標(biāo)事件及animate的使用技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下

本文實(shí)例講述了jQuery實(shí)現(xiàn)菜單感應(yīng)鼠標(biāo)滑動動畫效果的方法。分享給大家供大家參考。具體分析如下：

此代碼測試環(huán)境為IE9 以及GG、FF瀏覽器，IE8及以下瀏覽器可能不支持，希望理解。

這款JS鼠標(biāo)滑動效果使用jQuery實(shí)現(xiàn)簡單動畫的方法，而且也驚喜的發(fā)現(xiàn)，jquery有更好的書寫方法，可以連寫，在animate方法前加上stop方法就可實(shí)現(xiàn)鼠標(biāo)移出后，不再執(zhí)行滑動效果。

復(fù)制代碼代碼如下:

<!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>非常不錯(cuò)的jQuery鼠標(biāo)滑動效果</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>第一項(xiàng)</li>

<li>第二項(xiàng)</li>

<li>第三項(xiàng)</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>