juqery 点击显示点击隐藏，slideDown slideUp slideToggle

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>webrx-title</title>
<script src="js/jquery-1.11.2.min.js"></script>
<style>
#ad{
	width:200px;
	height:300px;
	background-color:green;
}
</style>
</head>
<body>
<input type="button" value="slideDown" onClick="$('#ad').slideDown('fast')" >
<input type="button" value="slideUp" onClick="$('#ad').slideUp('fast')">
<input type="button" value="slideToggle" onClick="$('#ad').slideToggle('fast')">
<div id="ad"></div>
</body>
</html>

注意引入的jquery一定要正确

slideToggle 点击关闭再点展开

slideUp 点击合上

slideDown 点击展开

mybtn 的控制点击显示点击隐藏

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>webrx-title</title>
<script src="js/jquery-1.11.2.min.js"></script>
<style>
#ad{
	width:200px;
	height:300px;
	background-color:green;
}
</style>
<script>
$(document).ready(function(e) {
    $('input[value=mybtn]').click(function(){
		var o=$('#ad');
		o.is(':hidden') ? o.slideDown('fast') : o.slideUp('slow'); 
	});
});
</script>
</head>
<body>
<input type="button" value="mybtn">
<div id="ad"></div>
</body>
</html>

fadein fadeout 控制显示隐藏

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>webrx-title</title>
<script src="js/jquery-1.11.2.min.js"></script>
<style>
#ad{
	width:200px;
	height:300px;
	background-color:green;
}
</style>
<script>
$(document).ready(function(e) {
    $('input[value=mybtn]').click(function(){
		var o=$('#ad');
		//(o.is(':hidden') ? o.slideDown('slow') : o.slideUp('slow') )
		(o.is(':hidden') ? o.fadeIn('slow') : o.fadeOut('slow') )
	});
});
</script>
</head>
<body>
<input type="button" value="fadeIn" onClick="$('#ad').fadeIn('fast')" >
<input type="button" value="fadeOut" onClick="$('#ad').fadeOut('fast')">
<input type="button" value="fadeTo" onClick="$('#ad').fadeToggle('fast')">
<input type="button" value="mybtn">
<div id="ad"></div>
</body>
</html>

注意slideUp和fadeIn

显示和隐藏的效果不同

来自为知笔记(Wiz)