jQuery 第五章 实例方法 详解动画之animate()方法

  .animate()

   .stop()

   .finish()

------------------------------------------------------------------------------

  .animate()

参数:(target, duration, easing, callback)

target:  到达的目标点, 例如{ width : ‘+=100‘, height: ‘+=100‘}  选择器选中的元素的宽和高,加上100。值 可以写 数字  100,  可以写 字符串的 ‘100px‘  也可以写计算  ‘+=100‘

duration:  运动过程的时间,  如果你需要 这个动画 过程 1秒, 那么就填  1000,(毫秒)  这个动画会 1秒内 执行完。 3000,就是3秒完成这个动画。 

easing:  过度动画的效果,  例如jquery 自身提供的 两个, linear 匀速运动,swing 先慢后快,再快,再慢,  不写默认是 swing  , jquery支持的动画插件( jQuery Easing Plugin)  记得在jquery 引入后 再引入 此插件 

链接: https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js 

callback:  回调函数,动画结束后执行的函数。

下面来看实际使用:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8 </head>
 9 <body>
10     <button>点击</button>
11     <div class="box" style="position: absolute; width: 100px; height: 100px; background: red"></div>
12
13     <script src="./jquery/jquery.js"></script>
14     <script>
15         $(‘button‘).click(function(){
16                 $(‘.box‘).animate({width: 300, height: 300, left: 100, top: 100},2000, function(){
17                     $(‘.box‘).animate({width: ‘+=100‘, height: ‘+=100‘, left: ‘+=100‘, top: ‘+=100‘},2000)
18             })
19         })
20         //先让他运动到 width 300px, height 300px  left 100px  top 100px  ,运动完后, 执行回调函数,  再
21         // 让他运动, width: ‘+=100‘, height: ‘+=100‘, left: ‘+=100‘, top: ‘+=100‘  所以你能明显的在中间看到有停顿
22     </script>
23 </body>
24 </html>

这样写,你会发现,如果回调函数多了,  看起来不直观, 所以animate() 有内置队列,  允许你 以下的 写法。

<script>
        $(‘button‘).click(function(){
                $(‘.box‘).animate({width: 300, height: 300, left: 100, top: 100},2000)
                    .animate({width: ‘+=100‘, height: ‘+=300‘, left: ‘+=100‘, top: ‘+=100‘},2000)
        })
</script>

不用写回调函数, 直接在后面链式调用即可

什么是内置队列呢, 第一个进去, 会第一个出, 所以,往后添加,会变成一个队列。

  .stop()

停止当前动画。

参数:null   true    true,true

不填参数: 只有一段动画, 直接停止。 但是如果你当前有两段动画,就是你有一段动画,而且回调函数,又有一段动画。   执行了.stop()   会停止当前段的动画,并且开始 第二段的动画。

.stop(true):  停止动画,  无论你后面有多少段动画,  执行.stop(true), 就停在当前位置了。

.stop(true,true):  停止当前动画, 并且,瞬间到达目标点。

    .stop() 不带参数

   .stop(true)

  .stop(true, true)

  

  .finish()

跳过动画,直接到达目标点

没有参数可以传

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8 </head>
 9 <body>
10     <button class="init">开始</button>
11     <button class="finish">finish</button>
12     <div class="box" style="position: absolute; width: 100px; height: 100px; background: red"></div>
13
14     <script src="./jquery/jquery.js"></script>
15     <script>
16         $(‘.init‘).click(function(){
17                 $(‘.box‘)
18                     .animate({width: 300, height: 300, left: 100, top: 100},2000)
19                         .animate({width: ‘+=100‘, height: ‘+=100‘, left: ‘+=100‘, top: ‘-100‘},2000)
20         })
21
22         $(‘.finish‘).on(‘click‘, function(){
23             $(‘.box‘).finish();
24         })
25
26     </script>
27 </body>
28 </html>

  .animate()  原理 39行

  1 jQuery.prototype.myDelay = function(duration){
  2         this.myqueue(‘fx‘,function(next){
  3             setTimeout(function(){
  4                 next();
  5             },2000)
  6         })
  7         return this;
  8     }
  9
 10     jQuery.prototype.myqueue = function(){
 11         var myqueueName = arguments[0] || ‘fx‘;
 12         var myqueueFun = arguments[1] || null;
 13
 14         if(arguments.length == 1){
 15             return this[0][myqueueName];
 16         }
 17
 18         this[0][myqueueName] == undefined ? this[0][myqueueName] = [myqueueFun] : this[0][myqueueName].push(myqueueFun);
 19
 20         return this;
 21     }
 22
 23     jQuery.prototype.mydequeue = function(type){
 24         var self = this;
 25         var mydequeueName = type || ‘fx‘;
 26         var myqueueArr = this.myqueue(mydequeueName);
 27         var currFun = myqueueArr.shift();
 28         if(currFun == undefined){
 29             return;
 30         }
 31         var next = function(){
 32            self.mydequeue(mydequeueName);
 33         }
 34         currFun(next);
 35
 36         return this;
 37     }
 38
 39     jQuery.prototype.myAnimate = function(obj, callback){
 40         var len = this.length;
 41         var self = this;
 42
 43         var baseFunc = function(next){
 44             var times = 0;
 45             for(var i = 0; i < len; i ++){
 46                 startMove(self[i], obj, function(){
 47                     times ++;
 48                     if(times == len){
 49                         callback && callback();
 50                         next();
 51                     }
 52                 });
 53             }
 54         }
 55
 56         this.myqueue(‘fx‘, baseFunc);
 57         if(this.myqueue(‘fx‘).length == 1){
 58             this.mydequeue(‘fx‘);
 59         }
 60
 61
 62         function startMove(dom, attrObj, callback) {
 63             clearInterval(dom.timer);
 64             dom.timer = setInterval(function () {
 65                 var speed = null, iCur = null;
 66                 var bStop = true;
 67
 68                 for (var attr in attrObj) {
 69                     if (attr == "opacity") {
 70                         iCur = parseFloat(getStyle(dom, attr)) * 100;
 71                     } else {
 72                         iCur = parseInt(getStyle(dom, attr));
 73                     }
 74                     speed = (attrObj[attr] - iCur) / 9;
 75                     speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
 76
 77                     if (attr == "opacity") {
 78                         dom.style.opacity = (speed + iCur) / 100;
 79                     } else {
 80                         dom.style[attr] = speed + iCur + ‘px‘;
 81                     }
 82
 83                     if (attrObj[attr] !== iCur) {
 84                         bStop = false;
 85                     }
 86                 }
 87                 if (bStop) {
 88                     clearInterval(dom.timer);
 89                     callback();
 90                 }
 91             }, 20)
 92         }
 93
 94         function getStyle(elem, prop){
 95             if(window.getComputedStyle){
 96                 return window.getComputedStyle(elem, null)[prop];
 97             }else{
 98                 return elem.currentStyle[prop];
 99             }
100         }
101
102         return this;
103     }

原文地址:https://www.cnblogs.com/yanggeng/p/10916711.html

时间: 2024-10-11 03:48:07

jQuery 第五章 实例方法 详解动画之animate()方法的相关文章

jQuery 第五章 实例方法 详解内置队列queue() dequeue() 方法

.queue() .dequeue() .clearQueue() --------------------------------------------------------------------------   .queue() 往队列 里面放东西 参数: .queue([queueName], fuc(next)) queueName: 队列名,字符串形式, 默认是 fx  fuc(next) : 可传函数, 等一系列 值. 他会把你的值, 放到 数组里面. (next) 如果你函数

jQuery Mobile的默认配置项详解,jQuery Mobile的中文配置api,jQuery Mobile的配置说明,配置大全

学习jQuery Mobile也有一段时间了,越来越上手了,也越来越喜欢他了.我根本就没有理由拒绝他的好.这里我有分享一下我对它的配置项的使用说明一下. 看代码解释: $(document).live("pageinit",function(event){ $.mobile.loadingMessage = "正在加载数据,请稍候......"; $.mobile.pageLoadErrorMessage="很抱歉,系统好像再打小瞌睡......"

搜索引擎算法研究专题五:TF-IDF详解

搜索引擎算法研究专题五:TF-IDF详解 2017年12月19日 ? 搜索技术 ? 共 1396字 ? 字号 小 中 大 ? 评论关闭 TF-IDF(term frequency–inverse document frequency)是一种用于资讯检索与资讯探勘的常用加权技术.TF-IDF是一种统计方法,用以评估一字词对于一个文件集或一个语料库中的其中一份文件的重要程度.字词的重要性随著它在文件中出现的次数成正比增加,但同时会随著它在语料库中出现的频率成反比下降.TF-IDF加权的各种形式常被搜

jquery.dataTables插件使用例子详解

DataTables是一个jQuery的表格插件.这是一个高度灵活的工具,依据的基础逐步增强,这将增加先进的互动控制,支持任何HTML表格 效果图 代码 <!doctype html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>jquery.dataTables插件</title>     <link rel

jQuery版推箱子游戏详解和源码

前言 偶然间看到很多用js写游戏的感觉很炫酷的样子,所以就想试试,就看了一些资料和某前端站点的视屏.于是乎就自己动手实践了一下,上推箱子截图 感觉很丑陋,但是功能是实现了.再说貌似大多都是这样的吧,这一关其实还是有点难度的,我做完之后想检测一下下一关正确么,居然还玩了以后才通关. 如果你看到这张图让你想起了你童年的回忆,说明你老了,这里可以试玩一下(很遗憾没有链接地址,最后又源码可以下载). css布局 主要考虑的是地图是怎么动态生成的,地图中有灰色的,还有墙,箱子,蓝色,红色背景,人物.先看c

jQuery Validate插件 reomte用法详解

在用户注册时经常要通过ajax请求判断用户账号是否已注册,最方便的方法便是用jQuery Validate插件 reomte方法 Jquery Validate插件, 调用远程方法验证参数, remote的用法: 在validate的方法上加入remote:"校验方法",例如:remote: "/test/checkAccount.jsp", 这时传进checkAccount.jsp的参数就是account=$("#account").val()

五度圈详解

(一) 五度圈几乎是每一本教乐理的书里都会提到的的图表.你背过,你也忘记过:你再度又背过,可是你终究还是忘了它!Why?因为你觉得它并不重要?因为你不了解它的涵义?因为你就是记不住?因为背过以后就是没使用过?No!答 案是因为它不用背所以你背不住,酷吧?!究竟五度圈这个图表到底有什么意义?为什么非学它不可呢? 顾名思义,五度圈基本定义是一个以C为起始点(十二点方向),以完全五度音程(Perfect 5th Intervals)为间距,顺时 钟方向所围成的一个圆圈.现在就让我们实际来推演一次: C

网络互联技术(四)-LSA的第四和第五种类型详解

LSA的第四和第五种类型详解 一.External LSA:第五种LSA 我们前面已经详细介绍了前面三种LSA,今天就接着介绍第四种和第五种LSA.因为理解ASBR Summary LSA--第四种LSA需要涉及External LSA的一些知识,所以我们先介绍第五种LSA,然后再回过头来看第四种LSA. External LSA由ASBR(Autonomous System Border Router,自治系统边界路由器,我们前面说过了OSPF网络就是一个自治系统)产生.它是用来通告OSPF网

彻底理解浮动float CSS浮动详解 清除浮动的方法

我们把网页的常用的布局格式分为以下三种: 1.标准流. 所谓的标准流就是,行内元素自己单独一行,而块级元素是上下显示的. 以前我们学习的都是标准流.   注意:标准流使我们网页布局中最稳定的一种结构 2. 浮动流 使我们学习的脱离标准流的第一种方式.会影响我们标准流的排列.所以,我们布局的时候,能用标准流做的,就不用浮动做. 3. 定位流 定位流也是脱离标准流的一种模式.它完全脱离标准流,不会对标准流有影响. 浮动(float) 我们要浮动的目的: 我们浮动的目的,就是可以把多个块级元素放到想要