aboutsummaryrefslogtreecommitdiff
path: root/static/development-bundle/docs/animate.html
diff options
context:
space:
mode:
Diffstat (limited to 'static/development-bundle/docs/animate.html')
-rw-r--r--static/development-bundle/docs/animate.html78
1 files changed, 78 insertions, 0 deletions
diff --git a/static/development-bundle/docs/animate.html b/static/development-bundle/docs/animate.html
new file mode 100644
index 0000000..9c365a4
--- /dev/null
+++ b/static/development-bundle/docs/animate.html
@@ -0,0 +1,78 @@
1<p><a href="http://docs.jquery.com/UI" title="UI">&laquo; Back to the jQuery UI Docs</a>
2</p><p>The jQuery UI effects core extends the animate function to be able to animate colors as well. It's heavily used by the class transition feature and it's able to color animate the following properties:
3</p>
4<ul><li> <b>backgroundColor</b>
5</li><li> <b>borderBottomColor</b>
6</li><li> <b>borderLeftColor</b>
7</li><li> <b>borderRightColor</b>
8</li><li> <b>borderTopColor</b>
9</li><li> <b>color</b>
10</li><li> <b>outlineColor</b>
11</li></ul>
12<p>with one of the following combinations:
13</p>
14<ul><li> <b>hex (#FF0000)</b>
15</li><li> <b>rgb (rgb(255,255,255))</b>
16</li><li> <b>names ("black")</b>
17</li></ul>
18<p><br />
19</p><p><div class="options list"><table class="options examples" cellspacing="0"><thead><tr><th>Name</th><th>Type</th></tr></thead><tbody>
20</table><b class="options">Example:</b><table class="options examples" cellspacing="0"><thead><tr><th>Name</th><th>Type</th></tr></thead><tbody>
21<div class="example">
22<ul><li><a href="#demo"><span>Demo</span></a></li><li><a href="#source"><span>View Source</span></a></li></ul>
23<div id="demo" class="tabs-container" rel="125">
24A simple color animation.<br />
25</p>
26<pre>$(&quot;.block&quot;).<a href="http://docs.jquery.com/Events/toggle" title="Events/toggle">toggle</a>(function() {
27 $(this).<a href="http://docs.jquery.com/Effects/animate" title="Effects/animate">animate</a>({ backgroundColor: &quot;black&quot; }, 1000);
28},function() {
29 $(this).<a href="http://docs.jquery.com/Effects/animate" title="Effects/animate">animate</a>({ backgroundColor: &quot;#68BFEF&quot; }, 500);
30});
31
32</pre>
33<p></div><div id="source" class="tabs-container">
34</p>
35<pre>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
36 "<a href="http://www.w3.org/TR/html4/loose.dtd" class="external free" title="http://www.w3.org/TR/html4/loose.dtd">http://www.w3.org/TR/html4/loose.dtd</a>"&gt;
37&lt;html&gt;
38&lt;head&gt;
39 &lt;script src="<a href="http://code.jquery.com/jquery-latest.js" class="external free" title="http://code.jquery.com/jquery-latest.js">http://code.jquery.com/jquery-latest.js</a>"&gt;&lt;/script&gt;
40
41 &lt;script src=&quot;http://ui.jquery.com/latest/ui/effects.core.js&quot;&gt;&lt;/script&gt;
42
43 &lt;script&gt;
44 $(document).ready(function(){
45 $(&quot;.block&quot;).<a href="http://docs.jquery.com/Events/toggle" title="Events/toggle">toggle</a>(function() {
46 $(this).<a href="http://docs.jquery.com/Effects/animate" title="Effects/animate">animate</a>({ backgroundColor: &quot;black&quot; }, 1000);
47},function() {
48 $(this).<a href="http://docs.jquery.com/Effects/animate" title="Effects/animate">animate</a>({ backgroundColor: &quot;#68BFEF&quot; }, 500);
49});
50
51 });
52 &lt;/script&gt;
53 &lt;style&gt;
54 .block {
55 color: white;
56 background-color: #68BFEF;
57 width: 150px;
58 height: 70px;
59 margin: 10px;
60 }
61 &lt;/style&gt;
62&lt;/head&gt;
63&lt;body&gt;
64 &lt;div class=&quot;block&quot;&gt; Click me&lt;/div&gt;
65&lt;/body&gt;
66&lt;/html&gt;
67</pre>
68<p></div>
69</p><p></div>
70</p><p></tbody></table></div>
71</p><!--
72Pre-expand include size: 3730 bytes
73Post-expand include size: 5382 bytes
74Template argument size: 3450 bytes
75Maximum: 2097152 bytes
76-->
77
78<!-- Saved in parser cache with key jqdocs_docs:pcache:idhash:3094-1!1!0!!en!2 and timestamp 20090603192313 -->
© 2015 Mike Crute