前端提高篇(九十八)：jQuery动画：显示与隐藏动画

效果：

把box的初始状态设成none，给box添加点击事件，点击时显示：

$(‘button’).click(function(){

$(‘.box’).show();

})

2. slideDown() / slideUp() / slideToggle()

---

slideDown()：滑动向下显示

slideUp()：滑动向上隐藏

slideToggle()：通过使用滑动效果（高度变化）来切换元素的可见状态。

如果被选元素是可见的，则隐藏这些元素，如果被选元素是隐藏的，则显示这些元素。

1.给按钮绑定点击事件，点击时，box从上到下，滑动显示出来：

$(‘button’).click(function(){

$(‘.box’).slideDown();

})

效果：

2.给按钮绑定点击事件，点击时，box从下到上，滑动隐藏：

此时初始状态是box显示，display: block;

$(‘button’).click(function(){

$(‘.box’).slideUp();;

})

效果：

3.给按钮绑定点击事件，点击前，如果box显示，点击后box以slideUp的方式隐藏；点击前如果box隐藏，点击后box以slideDown方式显示：

$(‘button’).click(function(){

$(‘.box’).slideToggle();

})

效果：

4. 还可以向slideToggle()传递参数：时间和函数，分别代表执行事件的时间和执行结束后要做的事情

4.1 设置执行时间

上面的动图是用了默认的执行时间

现在我设置执行时间为3s（3000ms）：

$(‘.box’).slideToggle(3000);

效果：可以明显感觉到速度变慢了

hide()和show()不具备指定执行时间的功能，两者都是瞬间完成的

4.2 设置动画完毕后进行的操作

$(‘button’).click(function(){

$(‘.box’).slideToggle(3000,function(){

console.log(‘end’);//动画执行结束后在控制台打印’end’

});

})

结尾

学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】