接下来还是讲jQuery的效果，我们之前讲到fadeTo()，现在要讲的是滑动效果，那么什么是滑动效果呢？
大家都在学校里上过课，上课时，当老师需要用到电脑时，投影机会投影到到屏幕上，让大家看到老师播放的视频，ppt等，那么屏幕是可以上升下降的，上升能让屏幕卷起来，下降能显现出屏幕，这就是滑动的效果。我们在界面可以让一个面板下滑，也可以让它上升，如果是下滑，我们就需要用到函数：slideDown()；而上滑就需要用到slideUp()函数，既然有前面的基础，那我也可以讲的快一点，与滑动效果相关的还有一种函数，大家也能想到，就是slideToggle()，可以在slideDown()和slideUp()之间来回切换。
函数语法：
$(selector).slideDown(speed,callback);
$(selector).slideUp(speed,callback);
$(selector).slideToggle(speed,callback);同样也是speed和callback函数，speed也是原来所说的可以填写毫秒，或者“fast”，“slow”这样的参数，我就不再赘述了。
接下来敲了一份样例，供大家实验：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("#box").slideDown();
});
$("#btn2").click(function(){
$("#box").slideUp("fast");
});
$("#btn3").click(function(){
$("#box").slideToggle("slow");
});
});
</script>
<style type="text/css">
#box
{
text-align:center;
padding:20px;
background-color:#eeeeee;
border:solid 1px #c6c6c6;
display:none;
}
</style>
</head>
<body>
<button id="btn1">点击我拉下面板</button>
<button id="btn2">点击我上升面板</button>
<button id="btn3">点击控制面板</button>
<div id="box">Hello world!</div>
</body>
</html>因为这些都比较简单，就不着重讲了，接下来讲一下基础效果的最后一个内容了，动画效果，大家别走！！!真的很简单。
通过animate函数我们能实现动画的效果，它的函数语法：
$(selector).animate({params},speed,callback);speed和callback就不再讲解了，因为已经讲过很多次了，我们来讲一下params里要填写什么内容，里面可以填写几乎所有的css属性（有些不是哦，例如是paddingLeft，而不是padding-left），举个例子：假设现在有一个<div id="test"></div>面板，还有一个按钮。我们在animate()函数里面填写left:200px；这个属性，那么当我们点击按钮的时候，这个面板就会往距离左边200px的位置移动。默认情况下，所有的html元素都是静态的在页面中显示，如果需要改变，我们要把元素的position属性改为：fixed，relative，absolute其中一个，才能实现animate()函数，当然我们也可以填写多个参数进去。接下来放一个实例，让大家玩玩：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
left:'300px',
opacity:'0.7',
height:'+=200px',
width:'200px'
});
});
});
</script>
</head>
<body>
<button>动画效果</button>
<div style="background:#000000;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>大家可能也发现了，里面的例子有一个height：‘+=200px’，这是啥意思呢，如果只是200px，那么当点击按钮后，它会把div面板的宽高都重新设置为200px，但是+=200px，就是在原来的基础上，再加上200px，所以肯定会比200px大。其实还有一点蛮有趣的，你可以试着把width或者height中的某一个值改为toggle看看会发生什么变化。
到目前为止，我们所学的都是点击一次按钮，然后进行一次操作，其实我们点击了一次按钮，是可以做很多工作的，例如我们点击一次按钮，在这个按钮的function里，我们可以让div面板进行多次的动画效果，这就是动画队列，例如这样：（大家一起要试试，多实践，会发现其实是其乐无穷）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
var div=$("div");
div.animate({height:'400px',opacity:'0.3'},"slow");
div.animate({width:'400px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.3'},"slow");
div.animate({width:'100px',opacity:'0.8'},"slow");
});
});
</script>
</head>
<body>
<button>开始动画</button>
<div style="background:#eeeeee;height:100px;width:100px;position:relative;">
</div>
</body>
</html>好哩，既然能进行动画效果演示，那么肯定是能中途暂停啦，就是stop()函数了，语法如下：
$(selector).stop(stopAll,goToEnd);stopAll参数询问的是是否清除动画队列，这就不是暂停了，而是停止，默认是false；goToEnd参数规定是否立即完成当前动作，默认是false。这个比较简单，放个实例供大家玩玩：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("div").animate({left:'300px'},"slow");
});
$("#btn2").click(function(){
$("div").stop();
});
});
</script>
</head>
<body>
<button id="btn1">开始动画</button>
<button id="btn2">stop</button>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>大家把动画改成滑动效果slide，再试试stop，也是可以达到停止的效果的。这就需要大家自己动手去实际操作一下咯，好了，jQuery的基本效果就讲到这里啦。
上一章：jQuery的学习笔记【二】 下一章：暂无
