jQuery实现菜单感应鼠标滑动动画效果的方法

更新时间：2015年02月28日 15:13:18 投稿：shichen2014

这篇文章主要介绍了jQuery实现菜单感应鼠标滑动动画效果的方法,实例分析了jQuery中鼠标事件及animate的使用技巧,非常具有实用价值,需要的朋友可以参考下

本文实例讲述了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实现鼠标选文字发新浪微博的方法
这篇文章主要介绍了jQuery实现鼠标选文字发新浪微博的方法,涉及jQuery鼠标事件的响应及新浪接口的调用技巧,非常简单实用的功能,需要的朋友可以参考下
2016-04-04
jQuery实现用户输入自动完成功能
本文介绍了jQuery实现用户输入自动完成功能的方法。具有很好的参考价值，下面跟着小编一起来看下吧
2017-02-02
jquery实现的让超出显示范围外的导航自动固定屏幕最顶上
经常会遇到这样的情况，当页面展示内容过长时，想点导航切换栏目，就得把滚动条拉回到顶上，这样操作总不太人性化，能不能让导航超出显示范围外时自动贴在屏幕最顶上呢？答案肯定是能的。如果不太明白，把滚动条拉到下面点，看下我博客是效果就明白了。
2011-09-09
Jquery判断form表单数据是否变化
这篇文章主要为大家详细介绍了Jquery判断form表单数据是否变化的方法，感兴趣的小伙伴们可以参考一下
2016-03-03
jQuery的.live()和.die() 使用介绍
很多开发者都知道jQuery的.live()方法，他们大部分知道这个函数做什么，但是并不知道是怎么实现的，所以用的并不那么舒适。而且他们却从未听过还有解除绑定的.live()事件的.die()方法。即使你熟悉这些，但是你意识到.die()了吗？
2011-09-09
jQuery操作iframe中js函数的方法小结
这篇文章主要介绍了jQuery操作iframe中js函数的方法,结合实例形式总结分析了jQuery操作iframe中的元素、函数常用方法与注意事项,具有一定参考借鉴价值,需要的朋友可以参考下
2016-07-07
jquery ztree实现树的搜索功能
这篇文章主要为大家详细介绍了jquery ztree实现树的搜索功能，zTree是利用 JQuery 的核心代码，实现一套能完成大部分常用功能的Tree插件，对ztree感兴趣的小伙伴们可以参考一下
2016-02-02
用Jquery.load载入页面后样式没了页面混乱的解决方法
一直想用jquery.load的方法载入新的页面，以实现局部刷新，结果发现样式没了，后来发现了解决方法，如果不过滤掉一些内容的话，直接加载，会使页面混乱的
2014-10-10
使用jQuery ajaxupload插件实现无刷新上传文件
项目中会经常用到AJAX无刷新上传图片，但是iframe上传和flash插件都是比较复杂的，所以就找了一个jquery的插件。下面通过实例代码给大家介绍使用jQuery ajaxupload插件实现无刷新上传文件功能，需要的朋友参考下吧
2017-04-04
jQuery实现弹出层效果
这篇文章主要为大家详细介绍了jQuery实现弹出层效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-12-12