JQuery的animate()实现菜单滑动

最新推荐文章于 2024-08-27 16:05:08 发布

qinglinglaoren

最新推荐文章于 2024-08-27 16:05:08 发布

阅读量3.3k

点赞数

分类专栏： JQuery 文章标签： jquery function xhtml float html 文档

本文链接：https://blog.csdn.net/qinglinglaoren/article/details/7608621

版权

JQuery 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!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>无标题文档</title>
<style type="text/css">
	body , ul , li {
		padding:0;
		margin:0;
	}
	body {
		font:12px/1.5 Verdana, Geneva, sans-serif;
	}
	ul {
		list-style:none;
	}
	ul li {
		float:left;
		padding:10px;
		cursor:pointer;
		border:solid 1px #333;
	}
</style>
<script type="text/javascript" src="js/jquery1.6.1.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$('li').hover(function() {
			$(this).stop().animate({
				height:100
			} , 200 , function() {
				
			});
		} , function() {
			$(this).stop().animate({
				height:24
			} , 200 , function() {
				
			});
		});
	});
</script>
</head>

<body>
<ul>
	<li>首页</li>
	<li>新闻</li>
	<li>产品</li>
	<li>关于我们</li>
</ul>


</body>
</html>

这是我为一个朋友写的demo，没有对样式进行处理。