第五章 jQuery框架动画特效

5.1 jQuery动画特效说明

jQuery框架中为我们封装了众多的动画和特效方法,只需要调用对应的动画方法传递合适的参数,就能够方便的实现一些炫酷的效果,而且jQuery框架还支持自定义各种动画效果。

jQuery中的动画效果主要有以下方法

① 显示和隐藏动画
② 展开和收起动画
③ 淡入和淡出动画
④ 自定义动画效果


5.2 显示和隐藏动画

jQuery框架中为我们提供了专门的方法来控制让标签显示或者是隐藏。标签的显示和隐藏在开发中相对来说是比较常见的操作,如果使用原生的JavaScript代码来控制标签的显示或者是隐藏,那么我们主要通过控制该标签的display属性值来实现。

jQuery中控制标签显示和隐藏的动画方法

① show() 控制让标签显示的动画方法
② hide() 控制让标签隐藏的动画方法
③ toggle()控制让标签显示|隐藏效果切换的动画方法

ex:以原生的方法来控制标签的显示或隐藏

 <!DOCTYPE html>
<html lang="en">
<head>
<!--....-->
<style>
#demoID{
width: 200px;
height: 50px;
background: red;
}
</style>
<script src="jquery-3.1.1.js"></script>
</head>
<body>
<div id="demoID"></div>
<script>
//控制标签显示或隐藏的方式(1)
//document.getElementById("demoID").style.display = "none";
//document.getElementById("demoID").style.display = "block";
//控制标签显示或隐藏的方式(2)
//$("#demoID").css("display","none");
$("#demoID").css("display","block");
</script>
</body>
</html>

显示和隐藏动画方法语法

$("selector").show(speed,callBack)
$("selector").hide(speed,callBack)

参数说明:

第一个参数:可选的参数。speed表示执行动画的速度,该速度可以使用系统默认提供的值,也可以自己以数字的形式传入。

系统默认提供的值有:“slow”、“normal”、“fast”,对应的速度分别为0.6秒、0.4秒和0.2秒。

自己以数字的形式传递则:传递如1000|3000类似的值,单位为毫秒,如果传递1000表示动画的执行速度为1秒。

第二个参数:可选的参数。callBack为动画完成时执行的回调函数,该函数每个元素执行一次。

切换动画方法语法

调用方式[1] => $("selector").toggle()
调用方式[2] => $("selector").toggle(speed,callBack)

方法参数说明:

(1)调用方式[1],不传递参数。切换当前元素(标签)的可见状态,如果当前元素的状态为不可见,则切换为可见,如果当前元素的状态为可见,则切换为不可见。

(2)调用方式[2],第一个可选的参数为动画执行的速度,第二个可选的参数为动画执行完后执行的回调函数。

总结

show方法和hide方法用来控制标签的显示或者是隐藏,内部的实现逻辑是同时改变标签的宽度、高度和透明度


5.3 展开和收起动画

jQuery框架中,为我们提供实现滑动效果的方法,slideDown和slideUp方法分别可以用来控制标签展开和收起。

展开和收起动画方法语法

slideDown(speed,callBack);
slideUp(speed,callBack)
slideToggle(speed,callBack)

方法解释

slideDown方法的功能是设置让指定标签的高度从顶部向底部增加,以呈现出一种展开的动画效果,元素的其他属性不会发生任何变化。

sldeUp方法的功能是设置让指定标签的高度从底部向顶部减小,仅仅改变标签的高度,其他的属性并不会改变。

slideToggle方法用来切换所选择元素的高度,如果当前标签的高度不为0,那么调用该方法后就会把标签的高度过渡为0,实现收起的效果,否则就实现展开的效果。

注意:无论是展开还是收起的动画方法,他们的动画效果都仅仅只会改变(增加或减小)标签的高度。

参数说明

第一个参数:动画执行的时间,同show方法。
第二个参数:动画执行完毕的回调函数,可以省略,同show方法。

代码示例

 <body>
<div>我是div</div>
<button>展开</button>
<button>收起</button>
<button>切换</button>
<script>
$(function () {
$("button").eq(0).click(function () {
$("div").slideDown(2000,function () {
console.log("展开");
});
})
$("button").eq(1).click(function () {
$("div").slideUp(2000);
})
$("button").eq(2).click(function () {
$("div").slideToggle(1000,function () {
alert("切换动画指定完毕")
});
})
})
</script>
</body>

5.4 淡入和淡出动画

jQuery框架中还提供了淡入和淡出的动画方法,这两个方法分别是fadeIn和fadeOut。

淡入和淡出动画方法语法

fadeIn(speed,callBack);
fadeOut(speed,callBack)
fadeToggle(speed,callBack)
fadeTo(speed,opactity,callBack)

方法说明:

淡入淡出方法的内部实现原理是控制标签的透明度,通过改变选中标签的透明度来实现淡入和淡出的动画效果,并不修改其他的属性。

fadeIn()方法的作用是淡入动画,即改变标签的透明度让标签慢慢的显示出来。

fadeOut()方法的作用是淡出动画,即改变标签的透明度让标签慢慢的消失(透明度为0)。

fadeToggle()方法的作用是切换动画,如果当前标签的透明度不为0,那么就执行淡出动画,否则就执行淡入动画。

fadeTo()方法的作用是淡入到,即使用动画效果实现将标签的透明度设置为指定的值。

备注:标签透明度的取值范围为0.0~1.0。

参数说明:

speed参数:动画执行的速度,单位为毫秒。
callBack参数:动画执行完毕的回调函数,可选。
opacity参数:指定的标签透明度(0.0~1.0)。

代码示例

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="JS/jquery-3.2.1.js"></script>
<style>
div{
width: 400px;
height: 200px;
background: red;
}
</style>
</head>
<body>
<div>我是div</div>
<button>淡入</button>
<button>淡出</button>
<button>切换</button>
<button>惦记我</button>
<script>
//fadeIn:淡入
//fadeOut:淡出
//fadeToggle切换
//fadeTo:淡入淡出到...0.5
$(function () {
//01 获取页面中指定的按钮,添加点击事件
$("button:eq(0)").click(function () {
//02 点击按钮后,获取页面中的div标签,设置动画
//第一个参数:速度
//第二个参数:回调
$("div").fadeIn(2000,function () {
alert("显示完成");
});
})
$("button:eq(1)").click(function () {
$("div").fadeOut(1000,function () {
alert("淡出")
});
})
$("button:eq(2)").click(function () {
$("div").fadeToggle();
})
$("button:eq(3)").click(function () {
//第一个参数:速度
//第二个参数:目标值
//第三个参数:回调
$("div").fadeTo(1000,0.5,function () {
alert("执行动画完毕")
});
})
})
</script>
</body>
</html>

5.5 自定义动画

jQuery框架中本身已经为我们封装好了一些简单的控制标签宽高、透明度相关的方法,如显示和隐藏、展开和收起、淡入和淡出,除了这些方法之外,jQuery还为我们提供了animate()方法,允许我们自定义动画效果,通过一些设置我们可以实现更加复杂的动画效果,

自定义动画的语法

animate(params,speed,easing,callBack)

参数说明:
第一个参数:params是一个对象。在该对象中以键值对的方式来要控制的属性样式和对应的值表示。

第二个参数:speed速度,可以是默认字符串中的某个(“slow” “normal” “fast”)或者是自定义的数字。

第三个参数:easing为动画插件使用的可选参数,用来控制动画的表现效果,通常有linear和swing等固定值。

第四个参数:动画执行完毕后的回调函数。

代码示例

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 200px;
height: 50px;
background: red;
}
</style>
</head>
<body>
<!--
animate({},timer,fn)
第一个参数:目标对象
第二个参数:速度
第三个参数:回调函数
-->
<div>我是个好人</div>
<button>
喜欢我就点我吧
</button>
<button>
喜欢我就点我吧2
</button>
<script src="js/jquery-3.2.1.js"></script>
<script>
$(function () {
$("button:eq(0)").click(function () {
$("div").animate({
width:"+=50",
height:"+=100"
},1000);
})
$("button:eq(1)").click(function () {
//01 直接设置目标值:速度和回调函数可以被省略
// $("div").animate({
// width:400,
// height:100
// },2000,function () {
// alert("执行完毕");
// })
//02 第二种用法
// $("div").animate({
// width:"+=50",
// height:"+=100"
// },1000);
//03 动画切换(如果有值那么就设置为0,否则就恢复)
$("div").animate({
width:"toggle",
height:"+=100"
},1000);
})
})
</script>
</body>
</html>

动画队列、动画停止和动画延迟

动画队列:如果某个标签身上要调用多个动画相关方法,即需要展示多个动画效果,那么所有的这些动画效果并不会同一时刻发生,而是需要在队列中排队,然后按照队列中动画效果的顺序依次展现。

动画停止:在执行动画的时候,可以通过stop()方法来停止动画。停止动画的语法为:

stop(clearQueue,gotoEnd)

方法和参数说明:

stop方法的功能是停止指定标签中正在执行的动画,其中第一个参数clearQueue为可选参数,传递一个布尔类型的值,表示是否停止正在执行的动画。第二个参数gotoEnd也是可选参数,传递一个布尔类型的值,表示是否立即完成正在执行的动画。

动画延迟:设置一个延时的值来推迟后续队列中动画的执行,可以传递延迟的具体时间,单位为毫秒。

代码示例01

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 200px;
height: 200px;
background: yellow;
}
</style>
</head>
<body>
<div>
</div>
<button>按钮</button>
<script src="js/jquery-3.2.1.js"></script>
<script>
$(function () {
$("button").click(function () {
$("div").animate({
width:"50px"
})
.animate({
height:50
})
.delay(2000)
.animate({
height:300
})
.animate({
width:400
})
})
})
</script>
</body>
</html>

代码示例02

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 50px;
height: 50px;
background: green;
}
</style>
</head>
<body>
<div>
</div>
<button>按钮</button>
<script src="js/jquery-3.2.1.js"></script>
<script>
$(function () {
//01 当页面加载完毕就执行动画效果
$("div").animate({
width:"400px"
},2000)
.animate({
height:200
},1000)
.delay(1000)
.animate({
height:50
})
.animate({
width:50
})
//02 当点击按钮的时候停止动画
$("button").click(function () {
//01 没有传递参数:结束当前的动画,继续执行后面的动画
//$("div").stop();
//02 传递1参数:
// true:所有的动画全部结束
// false:结束当前的动画,继续执行后面的动画
//$("div").stop(true);
//$("div").stop(false);
//03 传递2参数:
//true true : 立刻结束到达当前动画的终点,后面的不再执行
//true false:所有的动画全部结束
//false false:结束当前的动画,继续执行后面的动画
//false true : 立刻结束到达当前动画的终点,后面的继续执行
//$("div").stop(true,true);
//$("div").stop(true,false);
//$("div").stop(false,false);
$("div").stop(false,true);
})
})
</script>
</body>
</html>

jQuery系列 第五章 jQuery框架动画特效的更多相关文章

  1. jQuery系列 第四章 jQuery框架的选择器

    第四章 jQuery框架的选择器 4.1 jQuery选择器说明 jQuery 最核心的组成部分就是选择器引擎.它完全继承了 CSS 的风格,可以对 DOM 元 素的标签名.属性名.状态等进行快速准确 ...

  2. jQuery系列 第七章 jQuery框架DOM操作

    第七章 jQuery框架的选择器 jQuery框架继承和优化了JavaScript访问DOM对象的特性,我们使用jQuery框架提供的api可以更加方便的操作DOM对象. 7.1 创建DOM节点 使用 ...

  3. jQuery系列 第六章 jQuery框架事件处理

    第六章 jQuery框架事件处理 JavaScript以事件驱动来实现页面的交互,其核心是以消息为基础,以事件来驱动.虽然利用传统的JavaScript事件处理方式也能够完成页面交互,但jQuery框 ...

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

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

  5. jquery系列教程7-自定义jquery插件全解:对象函数、全局函数、选择器

    点击打开: jquery系列教程1-选择器全解 jquery系列教程2-style样式操作全解 jquery系列教程3-DOM操作全解 jquery系列教程4-事件操作全解 jquery系列教程5-动 ...

  6. 一款jquery和css3实现的卡通人物动画特效

    之前为大家分享了很多jquery和css3的动画实例.今天给大家带来一款非常炫的jquery和css3实现的卡通人物动画特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: < ...

  7. 第五章 jQuery中的动画

    通过jQuery中的动画方法,能轻松地为网页添加精彩的视觉效果,给用户一种全新体验. 1.show()方法和hide()方法 该方法的功能与css()方法设置display属性效果相同. 给show( ...

  8. jQuery系列:五个模块总结

    Query插件,以备并希望在前端方面有所长进.请批评指正. 一,类型判断全解 JQuery判断类型扩展方法:$.type() /*type: function( obj ) { if ( obj == ...

  9. JAVA基础第五章-集合框架Map篇

    业内经常说的一句话是不要重复造轮子,但是有时候,只有自己造一个轮子了,才会深刻明白什么样的轮子适合山路,什么样的轮子适合平地! 我将会持续更新java基础知识,欢迎关注. 往期章节: JAVA基础第一 ...

随机推荐

  1. 自动化运维工具---expec

    作为运维经常操作Linux服务器是不可避免的事情的,那么你们都是怎么管理的呢? 我们管理的方式较为复杂了,我说一下: 有一套服务器资产管理系统,所有服务器都记录在上面,包括用户名密码,内外网地址都会有 ...

  2. 源码实现 --> strcmp

    比较字符串大小 函数 int strcmp(const char *string1, const char *string2); 比较字符串string1和string2大小. 返回值< 0,  ...

  3. UWP 拖拽文件

    桌面环境下的UWP,加入拖拽模式还是会增加用户好感度的. 好了,先看一下我最新研发的[小微识别]吧,演示一下 炫酷,有没有,

  4. ES6 中 Promise 详解

    Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果.从语法上说,Promise 是一个对象,从它可以获取异步操作的消息.Promise 提供统一的 API ...

  5. JVM学习八:常用JVM配置参数

    前面学习的都是和类加载相关的知识,接下来学习的则和GC相关的知识,都是JVM的几个重点块. 零.在IDE的后台打印GC日志: 既然学习JVM,阅读GC日志是处理Java虚拟机内存问题的基础技能,它只是 ...

  6. 小程序之Tab切换(二)

    之前写的那个Tab切换是常规逻辑写的,接下来我会列出小程序api自带的写法,当然了 这个写法更加简单,实用.我们只需要配置app.json这个文件即可. 先看效果图: app.json代码:(有木有感 ...

  7. Vim配置及使用技巧

    要说Linux下比较好用的文本编辑器,我推荐vim(当然很多人都用emacs,可我没用过),用vim也有一年左右,有些心得体会想与诸位分享.在我的学习过程中,借鉴了不少优秀的博客,其中有csdn大神n ...

  8. 转git取消commit

     如果不小心commit了一个不需要commit的文件,可以对其进行撤销. 先使用git log 查看 commit日志 commit 422bc088a7d6c5429f1d0760d008d8 ...

  9. Flask 页面缓存逻辑,jinja2 过滤器,测试器

    回调接入点-页面缓存逻辑 from flask import Flask,request,render_template from werkzeug.contrib.cache import Simp ...

  10. 翻译:CREATE FUNCTION语句(已提交到MariaDB官方手册)

    本文为mariadb官方手册:CREATE FUNCTION的译文. 原文:https://mariadb.com/kb/en/library/create-function/我提交到MariaDB官 ...