jQuery系列 第五章 jQuery框架动画特效

时间  2020-06-23
标签 jquery 系列 第五 框架 动画 特效 栏目 JQuery 繁體版
原文   原文链接

第五章 jQuery框架动画特效

5.1 jQuery动画特效说明

jQuery框架中为咱们封装了众多的动画和特效方法，只须要调用对应的动画方法传递合适的参数，就可以方便的实现一些炫酷的效果，并且jQuery框架还支持自定义各类动画效果。css

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

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

5.2 显示和隐藏动画

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

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

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

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

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <!--....-->
 5     <style>
 6  #demoID{
 7  width: 200px;
 8  height: 50px;
 9  background: red;
10         }
11     </style>
12     <script src="jquery-3.1.1.js"></script>
13 </head>
14 <body>
15 <div id="demoID"></div>
16 <script>
17     //控制标签显示或隐藏的方式(1)
18     //document.getElementById("demoID").style.display = "none";
19     //document.getElementById("demoID").style.display = "block";
20     //控制标签显示或隐藏的方式(2)
21     //$("#demoID").css("display","none");
22  $("#demoID").css("display","block"); 23 </script>
24 </body>
25 </html>

显示和隐藏动画方法语法spa

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

参数说明：code

第一个参数：可选的参数。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方法。

代码示例

 1 <body>
 2 <div>我是div</div>
 3 <button>展开</button>
 4 <button>收起</button>
 5 <button>切换</button>
 6 <script>
 7  $(function () {  8  $("button").eq(0).click(function () {  9  $("div").slideDown(2000,function () { 10  console.log("展开"); 11  }); 12  }) 13  $("button").eq(1).click(function () { 14  $("div").slideUp(2000); 15  }) 16  $("button").eq(2).click(function () { 17  $("div").slideToggle(1000,function () { 18  alert("切换动画指定完毕") 19  }); 20  }) 21  }) 22 </script>
23 </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）。

代码示例

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <script src="JS/jquery-3.2.1.js"></script>
 7     <style>
 8  div{
 9  width: 400px;
10  height: 200px;
11  background: red;
12         }
13     </style>
14 </head>
15 <body>
16 <div>我是div</div>
17 <button>淡入</button>
18 <button>淡出</button>
19 <button>切换</button>
20 <button>惦记我</button>
21 <script>
22     //fadeIn:淡入
23     //fadeOut:淡出
24     //fadeToggle切换
25     //fadeTo:淡入淡出到...0.5
26  $(function () { 27         //01 获取页面中指定的按钮,添加点击事件
28  $("button:eq(0)").click(function () { 29             //02 点击按钮后,获取页面中的div标签,设置动画
30             //第一个参数:速度
31             //第二个参数:回调
32  $("div").fadeIn(2000,function () { 33  alert("显示完成"); 34  }); 35  }) 36  $("button:eq(1)").click(function () { 37  $("div").fadeOut(1000,function () { 38  alert("淡出") 39  }); 40  }) 41  $("button:eq(2)").click(function () { 42  $("div").fadeToggle(); 43  }) 44  $("button:eq(3)").click(function () { 45             //第一个参数:速度
46             //第二个参数:目标值
47             //第三个参数:回调
48  $("div").fadeTo(1000,0.5,function () { 49  alert("执行动画完毕") 50  }); 51  }) 52  }) 53 </script>
54 </body>
55 </html>

5.5 自定义动画

jQuery框架中自己已经为咱们封装好了一些简单的控制标签宽高、透明度相关的方法，如显示和隐藏、展开和收起、淡入和淡出，除了这些方法以外，jQuery还为咱们提供了animate（）方法，容许咱们自定义动画效果，经过一些设置咱们能够实现更加复杂的动画效果，

自定义动画的语法

animate(params,speed,easing,callBack)

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

第二个参数：speed速度，能够是默认字符串中的某个（“slow” “normal” “fast”）或者是自定义的数字。

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

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

代码示例

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7  div{
 8  width: 200px;
 9  height: 50px;
10  background: red;
11         }
12     </style>
13 </head>
14 <body>
15 <!--
16  animate({},timer,fn) 17  第一个参数:目标对象 18  第二个参数:速度 19  第三个参数:回调函数 20 -->
21 <div>我是个好人</div>
22 <button>
23  喜欢我就点我吧 24 </button>
25 <button>
26  喜欢我就点我吧2 27 </button>
28 <script src="js/jquery-3.2.1.js"></script>
29 <script>
30  $(function () { 31  $("button:eq(0)").click(function () { 32  $("div").animate({ 33  width:"+=50", 34  height:"+=100"
35  },1000); 36  }) 37  $("button:eq(1)").click(function () { 38             //01 直接设置目标值:速度和回调函数能够被省略
39             // $("div").animate({
40 // width:400,
41 // height:100
42 // },2000,function () {
43 // alert("执行完毕");
44 // })
45             //02 第二种用法
46             // $("div").animate({
47             // width:"+=50",
48             // height:"+=100"
49             // },1000);
50             //03 动画切换(若是有值那么就设置为0,不然就恢复)
51  $("div").animate({ 52  width:"toggle", 53  height:"+=100"
54  },1000); 55  }) 56  }) 57 </script>
58 </body>
59 </html>

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

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

动画中止：在执行动画的时候，能够经过stop（）方法来中止动画。中止动画的语法为：

stop（clearQueue,gotoEnd）

方法和参数说明：

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

动画延迟：设置一个延时的值来推迟后续队列中动画的执行，能够传递延迟的具体时间，单位为毫秒。

代码示例01

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7  div{
 8  width: 200px;
 9  height: 200px;
10  background: yellow;
11         }
12     </style>
13 </head>
14 <body>
15 <div>
16 </div>
17 <button>按钮</button>
18 <script src="js/jquery-3.2.1.js"></script>
19 <script>
20  $(function () { 21  $("button").click(function () { 22  $("div").animate({ 23  width:"50px"
24  }) 25  .animate({ 26  height:50
27  }) 28  .delay(2000) 29  .animate({ 30  height:300
31  }) 32  .animate({ 33  width:400
34  }) 35  }) 36  }) 37 </script>
38 </body>
39 </html>

代码示例02

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7  div{
 8  width: 50px;
 9  height: 50px;
10  background: green;
11         }
12     </style>
13 </head>
14 <body>
15 <div>
16 </div>
17 <button>按钮</button>
18 <script src="js/jquery-3.2.1.js"></script>
19 <script>
20  $(function () { 21         //01 当页面加载完毕就执行动画效果
22  $("div").animate({ 23  width:"400px"
24  },2000) 25  .animate({ 26  height:200
27  },1000) 28  .delay(1000) 29  .animate({ 30  height:50
31  }) 32  .animate({ 33  width:50
34  }) 35         //02 当点击按钮的时候中止动画
36  $("button").click(function () { 37             //01 没有传递参数:结束当前的动画,继续执行后面的动画
38             //$("div").stop();
39             //02 传递1参数:
40             // true:全部的动画所有结束
41             // false:结束当前的动画,继续执行后面的动画
42             //$("div").stop(true);
43             //$("div").stop(false);
44             //03 传递2参数:
45             //true true : 马上结束到达当前动画的终点,后面的再也不执行
46             //true false:全部的动画所有结束
47             //false false:结束当前的动画,继续执行后面的动画
48             //false true : 马上结束到达当前动画的终点,后面的继续执行
49             //$("div").stop(true,true);
50             //$("div").stop(true,false);
51             //$("div").stop(false,false);
52  $("div").stop(false,true); 53  }) 54  }) 55 </script>
56 </body>
57 </html>

 

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程