JQuery源码分析 --- 运动animate 基本原理

本文基于JQuery2.0.3版本，下载地址 http://pan.baidu.com/s/1hrH1jne

在看源码之前我们先看一些小的运动效果

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>#div1{ width: 300px; height: 300px; background: red;}</style>
</head>
<body><input type="button" value="点击" id="btn"><div id="div1"></div><script src="jquery-2.0.3.js"></script><script>$(function(){$('#btn').click(function() {$('#div1').toggle( 500 );　　// 改变宽高 透明度

　　　　　　　　//$('#div1').slideToggle( 500 );　上下滑动

　　　　　　　　//$('#div1').fadeToggle( 500 ); 淡入淡出

});;});</script>
</body>
</html>

但这些方法的底层，其实调用的是animate，我们看看animate的使用方法

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>#div1{ width: 300px; height: 300px; background: red;}</style>
</head>
<body><input type="button" value="点击" id="btn"><div id="div1"></div><script src="jquery-2.0.3.js"></script><script>$(function(){$('#btn').click(function() {// 通常animate带4个参数 // 1、要改变的对象名// 2、运动所用的时间// 3、运动形式 默认是缓冲swing，匀速是linear 一般只有2种方法 ，可扩展// 4、回调函数
                $('#div1').animate({ width: 500 }, 1000, 'swing', function(){alert(1);});

　　　　　　　　　// $('#div1').animate({ width: 'toggle' }, 1000);  其实还能这么写！});;});</script>
</body>
</html>

不过，在JQuery源码内部，这种写法其实被转成了这样

　　　　　$(function(){$('#btn').click(function() {$('#div1').animate({ width: 500 }, {duration : 500,easing : 'swing',complete : function(){alert(1);}});

　　　　　　　// 这种写法也叫配置写法，好处是不用担心少传参数，也不用担心参数顺序});;});

在JQuery源码的8341行， optall做了这件事，他把运动转成了配置写法

好，那接下来我们先分析第一个参数，animate第一个参数是一个对象，这个对象可以接收width，height，opacity这样的值，

也可以接收left, right, marginTop, paddingRight这样的值，那他是怎么做到的呢？

在源码内部的8326行，我们看到了一个叫做genFx的函数，他的作用就是收集第一个参数传进来的值

我们一起来看看这个函数内部是怎么实现的，在8451行

我们看到genFx函数接受2个参数，其中第二个参数是一个布尔值，

你传参，这个值就是1，不传就是0

而变量attrs是一个对象，他接受了你传进来的值，比如height,width等等，最后把这个值返回出去

所以我们回头再看第一个demo的时候，不难发现，其实JQuery内部是这样调用的，都是调用genFx函数，只是用参数控制执行

我们继续，在源码的8344行，我们看到这样一句，其实这句才真正实现了运动

未完待续。。。

如果你觉的本文对你有帮助，可随意支付一些小费，以鼓励我写出更多的文章。

转载于:https://www.cnblogs.com/carol1987/p/5537517.html

JQuery源码分析 --- 运动animate 基本原理相关推荐

jQuery源码分析-each函数
本文部分截取自且行且思 jQuery.each方法用于遍历一个数组或对象,并对当前遍历的元素进行处理,在jQuery使用的频率非常大,下面就这个函数做了详细讲解: 复制代码代码 /*! * jQuer ...
jQuery源码分析系列
声明:本文为原创文章,如需转载,请注明来源并保留原文链接Aaron,谢谢! 版本截止到2013.8.24 jQuery官方发布最新的的2.0.3为准附上每一章的源码注释分析 :https://git ...
[转] jQuery源码分析-如何做jQuery源码分析
jQuery源码分析系列(持续更新) jQuery的源码有些晦涩难懂,本文分享一些我看源码的方法,每一个模块我基本按照这样的顺序去学习. 当我读到难度的书或者源码时,会和<如何阅读一本书> ...
[转]jQuery源码分析系列
文章转自:jQuery源码分析系列-Aaron 版本截止到2013.8.24 jQuery官方发布最新的的2.0.3为准附上每一章的源码注释分析 :https://github.com/JsAaro ...
jQuery 源码分析第一篇之入口源码
目前阅读的是jQuery 1.11.3的源码,有参考nuysoft的资料.原来比较喜欢在自己的Evernote上做学习基类,并没有在网上写技术博客的习惯,现在开始学习JS的开源代码,想跟大家多交流,希 ...
jquery 源码分析初步
jquery 所有版本下载和引用地址 http://www.jq22.com/jquery-info122 一 jquery源码要点 jQuery框架的核心就是从HTML文档中匹配元素并对其执行操作 ...
jQuery源码分析系列：.domManip() .buildFragment() .clean()
.domManip(args,table,callback):是jQuery DOM操作的核心函数,可以扩展出如下方法: append/appendTo: prepend/prependTo: b ...
jQuery源码分析-10事件处理-Event-事件绑定与删除-bind/unbind+live/die+delegat/unde
10.4 .bind() .one() 10.4.1 如何使用 .bind( eventType, [eventData], handler(eventObject) ) 在匹配的元素上绑 ...
JQuery源码分析 - 闭包机制在jQuery中的使用及冲突解决
jQuery中的闭包机制本系列中我们将基于jquery3.5.1版本对jQuery源码进行分析,分析以源码加注释的方式展示. 本节中将分析jQuery源码中的 14 ~ 40行:自执行函数定义.环境 ...
jQuery源码分析之$.ajax方法
请阅读我其它的关于inspectPrefiltersOrTransport以及ajaxTransport等相关博文,请了解readyState状态码针对获取到location.href的兼容代码: ...

JQuery源码分析 --- 运动animate 基本原理

JQuery源码分析 --- 运动animate 基本原理相关推荐

最新文章

热门文章