教你三种jQuery框架实现元素显示及隐藏动画方式
摘要:在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动画效果实例_动画js
- jquery validation engine ajax验证,jQuery Validation Engine 表单验证「建议收藏」
- 用 jQuery实现图片等比例缩放大小详解编程语言
- jquery validate 验证详解编程语言
- Jquery动画详解编程语言
- jQuery选择器是什么
- jQuery 跨站脚本漏洞影响大量网站
- 让网站动起来!12款优秀的 jQuery 动画插件推荐
- jQuery技巧大放送学习jquery的朋友可以看下
- Jquery实战_读书笔记1—选择jQuery
- JQuery插件模板制作jquery插件的朋友可以参考下
- Jquery从头学起第四讲jquery入门教程
- 基于jquery的blockui插件显示弹出层
- jquery中多条件选择器,相对选择器,层次选择器的区别
- 在js(jquery)中获得文本框焦点和失去焦点的方法
- JQuery动画和停止动画实例代码
- 如何使用jquery动态加载js,css文件实现代码
- jQuery学习笔记(2)--用jquery实现各种模态提示框代码及项目构架
- jQuery实现动画效果的实例代码
- Jquery实现鼠标移上弹出提示框、移出消失思路及代码
- 让网页跳转到指定位置的jquery代码非书签
- jquery+json实现数据列表分页示例代码
- 快速解决jQuery与其他库冲突的方法介绍
- jQuery实现动画效果的简单实例
- 把jQuery的类、插件封装成seajs的模块的方法
- jQuery实现级联菜单效果(仿淘宝首页菜单动画)
- jquery鼠标放上去显示悬浮层即弹出定位的div层
- 使用jquery选择器如何获取父级元素、同级元素、子元素
- js、jquery图片动画、动态切换示例代码
- jQuery获取动态生成的元素示例
- 一款基jquery超炫的动画导航菜单可响应单击事件
- 基于jquery和svg实现超炫酷的动画特效
- jQuery+PHP打造滑动开关效果
- jQuery浮动导航菜单适合购物商品类型的网站
- jquery根据锚点offset值实现动画切换