您的位置：首页 > Web前端 > JQuery

jQuery 效果 - 隐藏和显示

2013-12-16 15:22 274 查看
隐藏、显示、切换，滑动，淡入淡出，以及动画，

jQuery hide()演示一个简单的 jQuery hide() 方法。

<!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" />
<script src="jquery.js"></script>
<title>无标题文档</title>
</head>

<body>
<p>如果您点击我，我会消失。</p>
<p>点击我，我会消失。</p>
<p>也要点击我哦。</p>

<script>
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
})
})
</script>

</body>
</html>


jQuery hide()

另一个 hide() 演示。如何隐藏部分文本。

<!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" />
<script src="jquery.js"></script>
<style>
.ex{
background:#0CF;
padding:7px;
border:solid 1px #999;
}
</style>
<title>无标题文档</title>
</head>

<body>

<h3>第一模块</h3>
<div class="ex">
<button class="hide" type="button">隐藏</button>
<p>
内容标题：<br />
第一模块内容··········
</p>
</div>

<h3>第二模块</h3>
<div class="ex">
<button class="hide" type="button">隐藏</button>
<p>
内容标题：<br />
第二模块内容··········
</p>
</div>
<script>
$(document).ready(function(){
$(".ex .hide").click(function(){
$(this).parents(".ex").hide("slow");
});
});
</script>

</body>
</html>


jQuery hide() 和 show()

通过 jQuery，您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素：
<!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" />
<script src="jquery.js"></script>
<style>
.ex{
background:#0CF;
padding:7px;
border:solid 1px #999;
}
</style>
<title>无标题文档</title>
</head>

<body>

<button id="hide" type="button">隐藏</button>
<button id="show" type="button">显示</button>
<div class="ex">
<p id="p1">如果点击"隐藏"按钮，我就会消失。</p>
</div>

<script>
$(document).ready(function(){
$("#hide").click(function(){
$("div").hide("slow");
});
$("#show").click(function(){
$("div").show("slow");
});
});
</script>
</body>
</html>
效果图：





语法：

$(selector).hide(speed,callback);

$(selector).show(speed,callback);


可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

jQuery toggle()

通过 jQuery，您可以使用 toggle() 方法来切换 hide() 和 show() 方法。
显示被隐藏的元素，并隐藏已显示的元素：

实例

<!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" />
<script src="jquery.js"></script>
<style>
.ex{
background:#0CF;
padding:7px;
border:solid 1px #999;
}
</style>
<title>无标题文档</title>
</head>

<body>

<button type="button">切换</button>
<div class="ex">
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
</div>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").toggle(2003);
})
})
</script>

</body>
</html>
效果图：





语法：

$(selector).toggle(speed,callback);


可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是 toggle() 方法完成后所执行的函数名称。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航