教程集 > jQuery > jquery 教程 > 正文 jQuery 淡入淡出、展开收缩菜单实现代码

jQuery 淡入淡出、展开收缩菜单实现代码

发布时间：2013-09-03 编辑：jiaochengji.com

jQuery淡入淡出、展开收缩菜单

jquery淡入淡出、展开收缩菜单

效果图:

运行以后，刷新下即可。

<!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=gb2312" /> 
<title>jQuery淡入淡出、展开收缩菜单</title> 
<style type="text/css"> 
ul li{list-style:none;} 
ul li.menu{position:relative;width:120px;} 
ul li.menu ul{display:none;text-align:center;background:#fff;border:1px solid #ddd;width:100px;padding:5px;} 
ul li.menu ul li{padding:5px 0;border-bottom:1px dotted #ddd;}</style> 
<script language="javascript" src="http://img.jb51.net/jslib/jquery/jquery-1.3.2.min.js"></script> 
<script language="javascript" type="text/javascript"> 
$(document).ready(function(){ 
$(".menu").hover( 
function(){ 
//$(".content").fadeIn(800); // 淡入 
$(".content").slideDown(800); // 展开 
},function(){ 
//$(".content").fadeOut(1000) // 淡出 
$(".content").slideUp(1000)　　　 // 收缩 
}); 
}) 
</script> 
</head> 
<body> 
<ul> 
<li class="menu"> 
<a>弹出菜单</a> 
<ul class="content"> 
<li>菜单内容1</li> 
<li>菜单内容2</li> 
<li>菜单内容3</li> 
<li>菜单内容4</li> 
<li>菜单内容5</li> 
</ul> 
</li> 
</ul> 
</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

您可能感兴趣的文章：
jQuery 淡入淡出、展开收缩菜单实现代码
 jquery (show,fadeOut,Animate)简单效果
 jQuery淡入淡出效果代码
 jquery 淡入淡出效果的简单实现
 jQuery淡入淡出效果 InnerFade
jQuery相册插件 AD Gallery
jQuery幻灯片插件 Skitter
C# 窗体淡入淡出效果的实现方法与代码
 基于jQuery的淡入淡出可自动切换的幻灯插件打包下载
 jquery中使用slideDown和slideUp做二级菜单思路解决

上一篇：jQuery解决iframe高度自适应代码下一篇：JQuery Tips(4) 一些关于提高JQuery性能的Tips

[关闭]

jQuery 淡入淡出、展开收缩菜单实现代码

最近更新

浏览排行