<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>15.4jQuery效果-滑动</title>
<!--
滑动效果有三种
slideDown():向下滑动
slideUp():向上滑动
slideToggle():向下滑动与向下滑动之间的切换
-->
<script src="../js/jquery-3.1.1.min.js"></script>
<script>
$(function(){
//1. slideDown()
$('#btn1').click(function(){
$('#div1').slideDown();
});
//2. slideUp()
$('#btn2').click(function(){
$('#div1').slideUp();
});
//3. slideToogle()
$('#btn3').click(function(){
$('#div2').slideToggle();
});
});
</script>
<style>
div{
width:100px;
height:100px;
background-color:red;
border:solid 1px #000000;
margin:1px;
}
</style>
</head>
<body>
<input type="button" id="btn1" value="slideDown()"><br>
<input type="button" id="btn2" value="slideUp()"><br>
<input type="button" id="btn3" value="slideToggle()"><br>
<div id="div1">1</div>
<div id="div2">2</div>
</body>
</html>
默认效果
单击“slideUp()”按钮
