jQuery框架实现元素显示及隐藏动画【附案例分析】，2024年最新350道Web前端面试真题分享

一、默认方式显示和隐藏

二、滑动方式显示和隐藏

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

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

---

Hello，你好呀，我是灰小猿！一个超会写bug的程序猿！

今天继续来和大家分享一下在jQuery高级开发中关于动画效果的简单实现！

首先来看一个简单的动画效果图：

我之前也和小伙伴们讲过使用jQuery框架可以很好的对html中元素的属性等进行操作，所以上面显示和隐藏的也只是一个div，而并不是一个图片。下面我就来和小伙伴们讲一个如何对元素的属性进行操作，使其显示或者隐藏！

在jQuery框架中对元素对象进行显示和隐藏有三种方式，分别是**“默认方式显示和隐藏”、“滑动方式显示和隐藏”、“淡入淡出显示和隐藏”。**接下来我们就分别对这三种方法进行介绍。

一、默认方式显示和隐藏

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

在默认方法下显示元素的方法是

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

其中的参数含义为：

• **speed：**动画的速度。三个预定义的值(“slow”,“normal”, “fast”)或表示动画时长的毫秒数值(如：1000)

• **easing：**用来指定切换效果，默认是"swing"，可用参数"linear"。* swing：动画执行时效果是 先慢，中间快，最后又慢。* linear：动画执行时速度是匀速的

• **fn：**在动画完成时执行的函数，每个元素执行一次。

同时在这里提醒一点就是，以上的三个参数是可有可无的，如果不对其进行设置，那么将以默认值执行。

如下实例代码：

// 显示div

$(“