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)