jQuery框架实现元素显示及隐藏动画【附案例分析】

// 隐藏div

$(“#showDiv”).hide(“slow”,“swing”,function () {

alert(“隐藏了…”)

});

那么难道我们每次都要定义一个方法用于元素显示，再定义一个方法用于元素隐藏吗？并不是的，jQuery中也充分的考虑到了这一点，所以在有一个既能实现显示又能实现隐藏的方法

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

真题解析、进阶学习笔记、最新讲解视频、实战项目源码、学习路线大纲
详情关注公中号【编程进阶路】

当调用该方法的时候，元素就会被隐藏掉，类似于hide()方法，当再次调用时，元素又会被显示出来，类似于show()方法。*

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

实例代码如下：

// 能显示能隐藏

$(“#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毫秒，也就是八秒后调用隐藏图片的方法，中间空余的五秒为显示图片的时间。

React

• 介绍一下react

• React单项数据流

• react生命周期函数和react组件的生命周期

• react和Vue的原理，区别，亮点，作用

• reactJs的组件交流

• 有了解过react的虚拟DOM吗，虚拟DOM是怎么对比的呢

• 项目里用到了react，为什么要选择react，react有哪些好处

• 怎么获取真正的dom

• 选择react的原因

• react的生命周期函数

• setState之后的流程

• react高阶组件知道吗？

• React的jsx，函数式编程

• react的组件是通过什么去判断是否刷新的

• 如何配置React-Router

• 路由的动态加载模块

• Redux中间件是什么东西，接受几个参数

• redux请求中间件如何处理并发