JQuery源码分析 --- 运动animate 预处理

Posted __枫伊飘渺

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JQuery源码分析 --- 运动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> <div id="div1"></div> <script src="jquery-2.0.3.js"></script> <script> $( function(){ $(\'#div1\').animate({ width : \'50%\'}, 2000); } ); </script> </body> </html>

 

可以看到我改变宽度的时候 ,写的是50%, 而初始宽度是300px,那么二者是如何转换的呢? 这就涉及到一个预处理的问题

 

 

在7860行,JQuery定义了一个叫tweeners的变量,

在7864行,使用了变量parts接收了正则匹配到的值,也就是50和%

在7865行,使用了变量unit接收了单位,也就是px

 

接下来的操作就是转换单位,这部分写的有点复杂

 

大概意思就是先把20px转换成百分比,比如在本例中,就被先转换成了1.4%,然后再运动到50%

 

那么在运动中还有哪些好玩的写法呢? 我们继续

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <style>
    #div1{ width: 300px; height: 300px; background: red; position: absolute; }
    </style>
</head>
<body>

<input type="button" value="点击">
<div id="div1"></div>


<script src="jquery-2.0.3.js"></script>

<script>

$( function(){
    $(\'input\').click(function() {
        $(\'#div1\').animate({ width : \'+=100\'}, 500);    
    });
    
} );

</script>

</body>
</html>

 

在这个例子中,我们用了+=的写法,也就是说,每次点击都会运动100px

这部分在源码中的实现也比较简单

 

原理就是在end之后判断是不是还有累加,如果没有累加了就直接把parts[2]付给初始值就OK了

 

继续,当我们这么写的时候,运行是OK的

$( function(){
    $(\'input\').click(function() {
        $(\'#div1\').animate({ \'margin-left\' : 100}, 500);    
    });
    
} );

或者这么写也行

$( function(){
    $(\'input\').click(function() {
        $(\'#div1\').animate({ \'marginLeft\' : 100}, 500);    
    });
    
} );

 

原因就是因为在8055行做了一个复合样式的处理

 

 

未完待续。。。

 

以上是关于JQuery源码分析 --- 运动animate 预处理的主要内容,如果未能解决你的问题,请参考以下文章

JQuery源码分析 --- 运动animate 预处理

jquery11源码 animate() : 运动的方法

jquery animate 运动速度由慢逐渐变快怎么实现

16. jQuery 的综合动画 和 jQuery 的停止动画

jQuery的动画方法

[js高手之路]打造通用的匀速运动框架