2024年最新jQuery框架实现元素显示及隐藏动画【附案例分析】，Web前端中高级岗面试为何越来越难

总结

阿里十分注重你对源码的理解，对你所学，所用东西的理解，对项目的理解。

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

其中的参数含义和上面一样

实例代码如下：

// 能显示能隐藏

$(“#showDiv”).toggle(“slow”,“linear”);

默认方式下实现效果如图：

二、滑动方式显示和隐藏

===============

从名字上我们应该也能区分出，**滑动方式和默认方式的不同之处其实就是显示和隐藏时的动画不一样罢了，**下面我们就来介绍一下在滑动方式下进行元素的显示、隐藏、既显示又隐藏，

滑动方式下显示

slideDown([speed],[easing],[fn])

实例代码：

// 滑动显示div

$(“#showDiv”).slideDown(“slow”);

滑动方式下隐藏

slideUp([speed,[easing],[fn]])

实例代码：

// 滑动隐藏div

$(“#showDiv”).slideUp(“fetch”);

滑动方式下既显示又隐藏：

slideToggle([speed],[easing],[fn])

实例代码：

// 滑动能显示能隐藏

$(“#showDiv”).slideToggle(“slow”);

滑动方式下实现效果如图：

三、淡入淡出方式显示和隐藏

=================

淡入淡出方式下进行元素的显示和隐藏其实和上面两种方法一样的，不同的也只是显示的效果不一样罢了，

淡入淡出方式下显示使用的方法是：

fadeIn([speed],[easing],[fn])

实现代码：

// 淡出显示div

$(“#showDiv”).fadeIn(“slow”)

淡入淡出方式下实现隐藏

fadeOut([speed],[easing],[fn])

实现代码：

// 淡出隐藏div

$(“#showDiv”).fadeOut(“fetch”);

淡入淡出方式下既显示又隐藏

fadeToggle([speed,[easing],[fn]])

实现代码：

// 淡入淡出显示和隐藏div

$(“#showDiv”).fadeToggle(“fetch”)

淡入淡出方式下运行的效果如下：

以上就是利用jQuery框架对元素进行显示和隐藏的方法，下面是上面实例的完整实现代码：

div显示和隐藏

四、案例：广告的自动显示和隐藏

===================

既然现在我们已经知道了jQuery框架下是如何进行元素的显示和隐藏的，那么就应该将其应用到实际的案例中去，下面通过实现广告的自动显示和隐藏的案例，来对该技术进一步加强实践。

我们要实现的是，在一个简单的网页中，页面打开三秒后将广告图显示出来，显示五秒后再将广告隐藏，这里对广告图片显示和隐藏的操作，根据上面的讲解，现在实现图片的显示和隐藏应该是很容易的了，那么到底应该如何实现延时显示和隐藏呢？

这里就要用到js中的一个定时器setTimeout(方法,时间);

该方法的第一个参数是一个方法名，如显示或隐藏图片的方法，第二个参数是毫秒数，表示页面加载完成后多少秒执行该方法，

那么根据思路，我们就可以在jQuery的入口函数中写入，页面加载完成3000毫秒，也就是三秒后调用显示图片的方法；页面加载完成8000毫秒，也就是八秒后调用隐藏图片的方法，中间空余的五秒为显示图片的时间。

下面我们来讲上述需求实现，完整代码如下：

最后

喜欢的话别忘了关注、点赞哦~

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