2024年Web前端最新前端提高篇(九十八)：jQuery动画：显示与隐藏动画，2024年最新2024华为Web前端高级面试题及答案

最后

编程基础的初级开发者，计算机科学专业的学生，以及平时没怎么利用过数据结构与算法的开发人员希望复习这些概念为下次技术面试做准备。或者想学习一些计算机科学的基本概念，以优化代码，提高编程技能。这份笔记都是可以作为参考的。

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

效果：

把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’

});

学习笔记

主要内容包括html，css，html5，css3，JavaScript，正则表达式，函数，BOM，DOM，jQuery，AJAX，vue等等

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

HTML/CSS

**HTML：**HTML基本结构，标签属性，事件属性，文本标签，多媒体标签，列表 / 表格 / 表单标签，其他语义化标签，网页结构，模块划分

**CSS：**CSS代码语法，CSS 放置位置，CSS的继承，选择器的种类/优先级，背景样式，字体样式，文本属性，基本样式，样式重置，盒模型样式，浮动float，定位position，浏览器默认样式

HTML5 /CSS3

**HTML5：**HTML5 的优势，HTML5 废弃元素，HTML5 新增元素，HTML5 表单相关元素和属性

**CSS3：**CSS3 新增选择器，CSS3 新增属性，新增变形动画属性，3D变形属性，CSS3 的过渡属性，CSS3 的动画属性，CSS3 新增多列属性，CSS3新增单位，弹性盒模型

JavaScript

**JavaScript：**JavaScript基础，JavaScript数据类型，算术运算，强制转换，赋值运算，关系运算，逻辑运算，三元运算，分支循环，switch，while，do-while，for，break，continue，数组，数组方法，二维数组，字符串

JavaScript

**JavaScript：**JavaScript基础，JavaScript数据类型，算术运算，强制转换，赋值运算，关系运算，逻辑运算，三元运算，分支循环，switch，while，do-while，for，break，continue，数组，数组方法，二维数组，字符串

[外链图片转存中…(img-hCak7LHg-1715456170217)]