本文介绍了作者自学JavaScript过程中，尝试用原生JavaScript模仿jQuery的slideUp和slideDown方法的实现过程。通过逐步分析和改进，最终成功实现了按需顺序执行的动画效果，解决了快速点击按钮导致的动画崩溃问题。
JavaScript是本人自学的第一门语言，也是本人目前最喜欢的一门语言。由于是自学，加上没有做过任何项目（只是偶尔自己做一些小效果玩玩），所以水平不咋地，写得不好之处，欢迎各位指正。
前言
在我自学JavaScript的时候，一直想实现类似安卓手机状态栏那种下拉上滑效果。在网上搜索一番后，我知道了jQuery的slideUp()和slideDown()方法。这两个方法让我很着迷，我迫不及待知道他是如何实现的。可当我尝试在网上寻找答案时，得到答案几乎都是：你去看jQuery源码不就知道了吗？于是我就去看了jQuery源码，但是面对几万行代码，让我望而却步。所以至今我也不知道slideUp()和slideDown()这两个方法在jQuery中到底是怎样实现的。
第一次尝试
在进一步学习JavaScript后，我了解了setTimeout和setInterval，并知道可以利用它们来逐渐的改变元素的属性，以此达到动画效果。于是我开始着手借助setInterval来实现我自己的下拉上滑效果。让我们以下面的HTML代码为基础，开始聊聊我的第一次实现：
文件名：Silder.html
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>Slider</title>
</head>
<body>
<button id="btn">Button</button>
<div id="panel" style="width:600px;height:400px;background:red;"></div>
<script src="Slider.js"></script>
</body>
</html>上面代码布局很简单，会显示一个id为btn的按钮；和一个宽为600px，高为400px，背景为红色，id为panel的div。最后我引入了一个文件名为Slider.js的JavaScript文件，这个文件目前还未创建，我将在下面给出。
为了方便描述，我把id为btn的按钮简记为btn，同理也把红色div简记为panel。
现在我想实现一个效果：当我点击btn时，如果panel当前可见，就执行一个上滑动画来将它慢慢收起，从而让它变成不可见；如果当前不可见，那就执行一个下拉动画将它慢慢展开，从而让它变成可见。整个流程如下：
最低0.47元/天 解锁文章
1050
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
