我用JQuery做了一个下拉菜单，怎么让它展开的同时实现淡出淡入的效果啊？
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/...
<!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>
<script type="text/javascript" src="jquery-1.11.3.min.midownload.js"></script>
<script>
$(function()
{
$('.nav').css(
{
'list-style':'none',
'margin':0,
'padding':0,
'display':'none',
});
$('.nav').parent().hover(function()
{
$(this).find('.nav').slideDown('normal')
},function()
{
$(this).find('.nav').stop().slideUp('normal')
})
});
</script>
<style>
.list{ background:#333;color:#fff; list-style:none;padding:0;width:500px;margin:50px auto;}
.list li{float:left; background:#333;color:#fff;height:35px;width:100px;line-height:30px; text-align:center; cursor:pointer}
</style>
</head>
<body>
<ul class="list">
<li>导航列表
<ul class="nav">
<li>导航列表1</li>
<li>导航列表1</li>
<li>导航列表1</li>
<li>导航列表1</li>
</ul>
</li>
<li>导航列表
<ul class="nav" >
<li>导航列表2</li>
<li>导航列表2</li>
<li>导航列表2</li>
<li>导航列表2</li>
</ul>
</li>
</body>
</html> 展开
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.11.3.min.midownload.js"></script>
<script>
$(function()
{
$('.nav').css(
{
'list-style':'none',
'margin':0,
'padding':0,
'display':'none',
});
$('.nav').parent().hover(function()
{
$(this).find('.nav').slideDown('normal')
},function()
{
$(this).find('.nav').stop().slideUp('normal')
})
});
</script>
<style>
.list{ background:#333;color:#fff; list-style:none;padding:0;width:500px;margin:50px auto;}
.list li{float:left; background:#333;color:#fff;height:35px;width:100px;line-height:30px; text-align:center; cursor:pointer}
</style>
</head>
<body>
<ul class="list">
<li>导航列表
<ul class="nav">
<li>导航列表1</li>
<li>导航列表1</li>
<li>导航列表1</li>
<li>导航列表1</li>
</ul>
</li>
<li>导航列表
<ul class="nav" >
<li>导航列表2</li>
<li>导航列表2</li>
<li>导航列表2</li>
<li>导航列表2</li>
</ul>
</li>
</body>
</html> 展开
1个回答
展开全部
你用的
.slideUp() 是动态地隐藏所有匹配的元素[向上减小]
如果你要实现淡入淡出的话 你可以使用
.fadeIn() 显示隐藏匹配元素的[淡入效果]
.fadeOut() 隐藏显示匹配元素的[淡出效果]
或者自己使用.animate()来做一个动画也是可以的哦
.slideUp() 是动态地隐藏所有匹配的元素[向上减小]
如果你要实现淡入淡出的话 你可以使用
.fadeIn() 显示隐藏匹配元素的[淡入效果]
.fadeOut() 隐藏显示匹配元素的[淡出效果]
或者自己使用.animate()来做一个动画也是可以的哦
追问
如果要同时实现 展开和淡出淡入 就只能用animate么？
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
