编程 Javascript

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

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

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

JQuery实现简单验证码提示解决方案

Dec 20 Javascript

JS短路原理的应用示例精简代码的途径

Dec 13 Javascript

JQuery性能优化的几点建议

May 14 Javascript

jQuery函数map()和each()介绍及异同点分析

Nov 08 Javascript

js中substr,substring,indexOf,lastIndexOf，split，replace的用法详解

Nov 09 Javascript

Vue.js快速入门教程

Sep 07 Javascript

javascript实现Java中的Map对象功能的实例详解

Aug 21 Javascript

微信小程序实现页面跳转传值以及获取值的方法分析

Dec 18 Javascript

ES6入门教程之变量的解构赋值详解

Apr 13 Javascript

使用apifm-wxapi快速开发小程序过程详解

Aug 05 Javascript

JS+CSS+HTML实现“代码雨”类似黑客帝国文字下落效果

Mar 17 Javascript

vue 动态生成拓扑图的示例

Jan 03 Vue.js

js实现完全自定义可带多级目录的网页鼠标右键菜单方法

Feb 28 #Javascript

js实现同一页面可多次调用的图片幻灯切换效果

Feb 28 #Javascript

js获取当前日期前七天的方法

Feb 28 #Javascript

JQuery的ON()方法支持的所有事件罗列

Feb 28 #Javascript

使用命令对象代替switch语句的写法示例

Feb 28 #Javascript

Underscore.js常用方法总结

Feb 28 #Javascript

js实现文字跟随鼠标移动而移动的方法

Feb 28 #Javascript