第一种：该方法隐藏所有 <p> 元素：
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>
第二种：（如何隐藏部分文本。）
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".ex .hide").click(function(){
$(this).parents(".ex").hide("slow");
});
});
</script>
<style type="text/css">
div.ex
{
padding:7px;
border:solid 1px #c3c3c3;
}
</style>
</head>
<body>
<h3>中国办事处</h3>
<div class="ex">
<button class="hide" type="button">隐藏</button>
<p>联系人：张先生<br />
北三环中路 100 号<br />
北京</p>
</div>
<h3>美国办事处</h3>
<div class="ex">
<button class="hide" type="button">隐藏</button>
<p>联系人：David<br />
第五大街 200 号<br />
纽约</p>
</div>
</body>
</html>
第三种（hide() 和 show() 方法来隐藏和显示 HTML 元素：）
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
});
</script>
</head>
<body>
<p id="p1">如果点击“隐藏”按钮，我就会消失。</p>
<button id="hide" type="button">隐藏</button>
<button id="show" type="button">显示</button>
</body>
</html>
第四种：（带有 speed 参数的 hide() 方法：）
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide(1000);
});
});
</script>
</head>
<body>
<button type="button">隐藏</button>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
</body>
</html>
第五种：（使用 toggle() 方法来切换 hide() 和 show() 方法）
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").toggle();
});
});
</script>
</head>
<body>
<button type="button">切换</button>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
</body>
</html>
第六种：（jQuery fadeIn() 用于淡入已隐藏的元素，其中若想淡出则使用fadeOut（）方法，并且去掉div中的display:none）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三张图片的淡入效果</title>
<script src="jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("#aa").fadeIn();
$("#bb").fadeIn("slow");
$("#cc").fadeIn(4000);
});
});
</script>
</head>
<body>
<p>点击之后，三张图片淡入</p>
<button>点击这里，使三个矩形淡入</button>
<div id="aa" style="width:80px;height:80px;display:none;"></div>
<br>
<div id="bb" style="width:80px;height:80px;display:none;"></div>
<br>
<div id="cc" style="width:80px;height:80px;display:none;"></div>
</body>
</html>
第七种（jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("#aa").fadeToggle();
$("#bb").fadeToggle("slow");
$("#cc").fadeToggle(3000);
});
});
</script>
</head>
<body>
<button>请点击</button>
<div id="aa" style="width:80px;height:80px;"></div>
<br>
<div id="bb" style="width:80px;height:80px;"></div>
<br>
<div id="cc" style="width:80px;height:80px;"></div>
</body>
</html>
第八种（jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。如果元素向下滑动，则 slideToggle() 可向上滑动它们。如果元素向上滑动，则 slideToggle() 可向下滑动它们。）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".bb").click(function(){
$(".aa").slideToggle("slow");
});
});
</script>
<style type="text/css">
div.aa,p.bb{
margin: 0px;
padding: 5px;
text-align: center;
background: #e5eecc;
border: solid 1px #c3c3c3;
}
.aa{
height: 150px;
display: none;
}
</style>
</head>
<body>
<div class="aa">
<p>啦啦啦啦啦</p>
<p>哈哈哈哈哈</p>
</div>
<p class="bb">请点击这里</p>
</body>
</html>
第九种（图片的动画效果其中用到方法包括1、 $("div").animate({ left:'250px',opacity:'0.5',height:'150px', width:'150px' });2、$("div").animate({ left:'250px', height:'+=150px',width:'+=150px'})3、$("div").animate({height:'toggle'});4、 var div=$("div");div.animate({height:'300px',opacity:'0.4'},"slow");div.animate({width:'300px',opacity:'0.8'},"slow");div.animate({height:'100px',opacity:'0.4'},"slow");div.animate({width:'100px',opacity:'0.8'},"slow");5、 var div=$("div");div.animate({left:'100px'},"slow");div.animate({fontSize:'3em'},"slow")；）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片的动画效果</title>
<script src="jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var div = $("div");
div.animate({left:'100px'},"slow");
div.animate({fontSize:'5em'},"slow");
$("button").click(function(){
$("#aa").css("color","red").slideUp(2000).slideDown(2000);
})
});
</script>
</head>
<body>
<div style="height:200px;width:200px;background:green;position:absolute;">HELLO</div>
<p id="aa">看我在不停的动！</p>
<button>请点击</button>
</body>
</html>