摘要:在jQuery框架中对元素对象进行显示和隐藏有三种方式,分别是“默认方式显示和隐藏”、“滑动方式显示和隐藏”、“淡入淡出显示和隐藏”。

本文分享自华为云社区《jQuery框架实现元素显示及隐藏动画【附案例分析】》,原文作者:灰小猿。

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

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

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

一、默认方式显示和隐藏

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

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

其中的参数含义为:

  • speed:动画的速度。三个预定义的值("slow","normal", "fast")或表示动画时长的毫秒数值(如:1000)
  • easing:用来指定切换效果,默认是"swing",可用参数"linear"。* swing:动画执行时效果是 先慢,中间快,最后又慢。* linear:动画执行时速度是匀速的
  • fn:在动画完成时执行的函数,每个元素执行一次。

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

如下实例代码:

 // 显示div
$("#showDiv").show("slow","swing");
linear 匀速

在默认方式下实现元素隐藏的方法是

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

其中的参数含义和show方法中的一样。同样也是三个参数是可有可无的,如果不对其进行设置,那么将以默认值执行。在这里我们增加一个最后的执行函数,让其弹出一个窗口“隐藏了...”。

如下实例代码:

// 隐藏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框架对元素进行显示和隐藏的方法,下面是上面实例的完整实现代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>默认方式显示和隐藏动画</title>
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script> <script>
function hideFn() {
// 隐藏div
/*$("#showDiv").hide("slow","swing",function () {
alert("隐藏了...")
});*/ // 滑动隐藏div
$("#showDiv").slideUp("fetch"); // 淡出隐藏div
// $("#showDiv").fadeOut("fetch"); } function showFn() {
// 显示div
// $("#showDiv").show("slow","swing");
// linear 匀速 // 滑动显示div
// $("#showDiv").slideDown("slow"); // 淡出显示div
$("#showDiv").fadeIn("slow")
} function toggleFn() {
// 能显示能隐藏
// $("#showDiv").toggle("slow","linear"); // 滑动能显示能隐藏
// $("#showDiv").slideToggle("slow"); // 淡入淡出显示和隐藏div
$("#showDiv").fadeToggle("fetch")
} </script> </head>
<body>
<input type="button" value="点击按钮隐藏div" onclick="hideFn()">
<input type="button" value="点击按钮显示div" onclick="showFn()">
<input type="button" value="点击按钮切换div显示和隐藏" onclick="toggleFn()"> <div id="showDiv" style="width:300px;height:300px;background:pink">
div显示和隐藏
</div>
</body>
</html>

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

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

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

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

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

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

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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>广告的自动显示与隐藏</title>
<style>
#content{width:100%;height:500px;background:#999}
</style> <!--引入jquery-->
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
<script>
// 图片延时显示和隐藏的步骤
// 1、在页面加载完成之后调用定时器setTimeout()方法
// 2、在定时器中调用显示广告和隐藏广告的函数
// 3、使用show和hide方法实现图片的显示和隐藏 // 设置入口函数
$(function () {
// 延时3秒后显示图片
setTimeout(adShow,3000);
// 延时6秒后隐藏图片
setTimeout(adHide,8000);
});
// 显示图片
function adShow() {
$("#ad").show("slow");
} // 隐藏图片
function adHide() {
$("#ad").hide("fast");
} </script>
</head>
<body>
<!-- 整体的DIV -->
<div>
<!-- 广告DIV -->
<div id="ad" style="display: none;">
<img style="width:100%" src="../img/adv.jpg" />
</div> <!-- 下方正文部分 -->
<div id="content">
正文部分
</div>
</div>
</body>
</html>

效果如下:

点击关注,第一时间了解华为云新鲜技术~

教你三种jQuery框架实现元素显示及隐藏动画方式的更多相关文章

  1. jquery中使元素显示和隐藏方法之间的区别

    在实际的项目开发中,要使一个元素隐藏的方法有很多,比如css的多种属性和jquery的多种方法,虽然他们的作用都是使元素不可见,但是各个方法实现的原理是不一样的.下面主要介绍jquery各个元素隐藏方 ...

  2. jQuery系列 第三章 jQuery框架操作CSS

    第三章 jQuery框架操作CSS 3.1 jQuery框架的CSS方法 jQuery框架提供了css方法,我们通过调用该方法传递对应的参数,可以方便的来批量设置标签的CSS样式. 使用JavaScr ...

  3. CAD转DXF怎么转换?教你三种转换方法

    CAD图纸在我们日常生活中都是可见到的,因为CAD图纸文件的格式是多样的,在工作中就需要经常将CAD的格式进行转换.那CAD转DXF怎么转换呢?这个问题很多的小伙伴们都遇到过,下面小编就来教大家三种转 ...

  4. jQuery如何判断元素是否是隐藏的?

    jQuery函数简介: is(expr) 用一个表达式来检查当前选择的元素集合,如果其中至少有一个元素符合这个给定的表达式就返回true. 如果没有元素符合,或者表达式无效,都返回'false'. 注 ...

  5. jquery判断div是否显示或者隐藏

    jquery判断div是否显示或者隐藏 很多时候会要判断一个div是不是显示着,没显示要怎么处理,显示的如何处理: 方法很简单,选择到你要判断的div,再用is(':hidden')判断是否隐藏:或者 ...

  6. jquery判断对象是否显示或隐藏

    if($('a.specail2').is(":visible")){ /**jquery判断对象是否显示或隐藏**/ $('a.one').hide(); $('a.specai ...

  7. 官网安装Python包太慢?教你三种下载安装方式-PiP、conda、轮子,教你三种Pytorch的下载安装方式,保证你再也不用出现Error

    上一期我们介绍了CUDA下载安装以及其总结,这一期教大家如何在Anaconda中使用CUDA来进行加速.神经网络依赖cuDNN的下载安装,以及下载和安装Pytorch-GPU安装包的三种方式(cond ...

  8. CSS的三种基本框架

    CSS的三类选择器 1.css-css的基本选择器(三种) 要对哪个标签里面的数据进行操作 (1)标签选择器 div { background-color:red; color:blue; } (2) ...

  9. jQuery判断当前元素显示状态并控制元素的显示与隐藏

    1.jQuery判断一个元素当前状态是显示还是隐藏 $("#id").is(':visible');   //true为显示,false为隐藏 $("#id") ...

  10. GB2312、GBK和UTF-8三种编码以及QT中文显示乱码问题

    1.GB2312.GBK和UTF-8三种编码的简要说明 GB2312.GBK和UTF-8都是一种字符编码,除此之外,还有好多字符编码.只是对于我们中国人的应用来说,用这三种编码 比较多.简单的说一下, ...

随机推荐

  1. orm 语法 数据库连接、建表、增删改查、回滚、单键关联 、多键关联、三表关联

    1.数据库连接, #!usr/bin/env/python # -*- coding:utf-8 -*- # from wangteng import sqlalchemy from sqlalche ...

  2. CAD2012安装错误

    安装CAD2012总是会出现各种错误,不能安装,特别是.NET Framework Runtime 4.0安装错误. 单独安装dotNetFx40_Full_x86_x64.exe会提示更高级的版本已 ...

  3. DateTools时间插件

    import java.text.DateFormat;import java.text.ParsePosition;import java.text.SimpleDateFormat;import ...

  4. JPA学习---第十二节:JPA中的联合主键

    1.定义实体类,代码如下: (1).将联合主键放到一个类中,代码如下: package learn.jpa.entity; import java.io.Serializable; import ja ...

  5. Android 关于显示键盘,布局错乱网上顶的问题

    <activity android:name="com.taiyi.DiscussActivity" android:windowSoftInputMode="st ...

  6. 分库分表后跨分片查询与Elastic Search

    携程酒店订单Elastic Search实战:http://www.lvesu.com/blog/main/cms-610.html 为什么分库分表后不建议跨分片查询:https://www.jian ...

  7. JAVA监听器Listener

    JAVA监听器Listener 一. 简介 监听器用于对web中内置对象的状态或者属性变化进行监听并做出相应响应的一种Servlet;在内置对象的生命周期中,产生.销毁等状态发生变化时,监听器就会进行 ...

  8. 设计模式——MVC MVP MVVM

    了解到Vue是MVVM前端框架, 中午就研究了一下MVVM,但要从MVC开始说起: M(Model):模型,提供数据: V(View):视图,负责显示: C(Controller):控制器,负责逻辑处 ...

  9. 针对json的查询--alibaba的开源项目jsonq

    项目地址: https://github.com/alibaba/jsonq 示例json { , , "test": "Hello, world!", &qu ...

  10. python的几个小程序

    ##九九乘法口诀 num1=1 while num1<10: num2=1 while num2<=num1: print(num2,"*",num1,"=& ...