2024年最新前端提高篇(九十八)：jQuery动画：显示与隐藏动画(1)，滴滴 战略 面试

最后

为了帮助大家更好的了解前端，特别整理了《前端工程师面试手册》电子稿文件。

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

.box {

width: 100px;

height: 100px;

background-color: pink;

color: #fff;

line-height: 100px;

text-align: center;

}

btn

box

效果：

给按钮添加事件，点击时隐藏box：

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

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

})

效果：

把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();

})

最后

总的来说，面试官要是考察思路就会从你实际做过的项目入手，考察你实际编码能力，就会让你在电脑敲代码，看你用什么编辑器、插件、编码习惯等。所以我们在回答面试官问题时，有一个清晰的逻辑思路，清楚知道自己在和面试官说项目说技术时的话就好了

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

g-Gkl2IUqX-1715745739374)]

[外链图片转存中…(img-AQgDhytM-1715745739374)]

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