docs/anim.html
<!DOCTYPE html>
<html>
<head>
<title>anim.js</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
<link rel="stylesheet" media="all" href="docco.css" />
</head>
<body>
<div id="container">
<div id="background"></div>
<ul id="jump_to">
<li>
<a class="large" href="javascript:void(0);">Jump To …</a>
<a class="small" href="javascript:void(0);">+</a>
<div id="jump_wrapper">
<div id="jump_page">
<a class="source" href="ajax.html">
ajax.js
</a>
<a class="source" href="anim.html">
anim.js
</a>
<a class="source" href="core.html">
core.js
</a>
<a class="source" href="detect.html">
detect.js
</a>
<a class="source" href="dom.html">
dom.js
</a>
<a class="source" href="end.html">
end.js
</a>
<a class="source" href="evt.html">
evt.js
</a>
<a class="source" href="fx.html">
fx.js
</a>
<a class="source" href="legacy.html">
legacy.js
</a>
<a class="source" href="misc.html">
misc.js
</a>
<a class="source" href="more.html">
more.js
</a>
<a class="source" href="polyfill.html">
polyfill.js
</a>
<a class="source" href="sizzle.html">
sizzle.js
</a>
<a class="source" href="start.html">
start.js
</a>
<a class="source" href="test.html">
test.js
</a>
<a class="source" href="util.html">
util.js
</a>
</div>
</li>
</ul>
<ul class="sections">
<li id="title">
<div class="annotation">
<h1>anim.js</h1>
</div>
</li>
<li id="section-1">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-1">¶</a>
</div>
</div>
</li>
<li id="section-2">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-2">¶</a>
</div>
<hr>
</div>
</li>
<li id="section-3">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-3">¶</a>
</div>
<h2 id="animation">Animation</h2>
</div>
</li>
<li id="section-4">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-4">¶</a>
</div>
</div>
<div class="content"><div class='highlight'><pre>
<span class="hljs-comment">/**
* Animate a set of CSS properties given
*
* @constructor
* @class Animation
* @private
* @param {Object} css An object containing CSS properties
* @param {Number} timing The timing
* @param {Function} onanimationstart fn to exec. when animation starts
* @param {Function} onanimationend fn to exec. when animation ends
* @example
* <div class="code"><pre class="prettyprint">
* new Animation ({opacity:0});
* </pre></div>
* <div class="code"><pre class="prettyprint">
* new Animation ({width:100,height:100})
* </pre></div>
* @since 0.1.0
*/</span>
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Animation</span> <span class="hljs-params">(el, css, timing, onanimationstart, onanimationend)</span> </span>{
<span class="hljs-keyword">if</span> (<span class="hljs-keyword">typeof</span> css !== <span class="hljs-string">"object"</span>) {
<span class="hljs-keyword">return</span>;
}
}
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">animateCss</span> <span class="hljs-params">(el, prop, timing, from, to)</span> </span>{
<span class="hljs-keyword">if</span> (!(el && prop && timing && from)) {
<span class="hljs-keyword">return</span>;
}</pre></div></div>
</li>
<li id="section-5">
<div class="annotation">
<div class="pilwrap ">
<a class="pilcrow" href="#section-5">¶</a>
</div>
<p>If <code>to</code> is not provided, treat <code>from</code> as <code>to</code></p>
</div>
<div class="content"><div class='highlight'><pre> to = to || form;
<span class="hljs-keyword">if</span> (from === to) {
<span class="hljs-keyword">var</span> diff = to - el.style[prop];
}
}</pre></div></div>
</li>
</ul>
</div>
</body>
</html>