1 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> |
---|
2 | <html> |
---|
3 | <head> |
---|
4 | <title>YUI Library Examples: Animation Utility: Chaining Animations Using the <code>end</code> Event</title> |
---|
5 | <meta http-equiv="content-type" content="text/html; charset=utf-8"> |
---|
6 | <link rel="stylesheet" type="text/css" href="../../assets/yui.css" > |
---|
7 | |
---|
8 | <style> |
---|
9 | /*Supplemental CSS for the YUI distribution*/ |
---|
10 | #custom-doc { width: 95%; min-width: 950px; } |
---|
11 | #pagetitle {background-image: url(../../assets/bg_hd.gif);} |
---|
12 | #pagetitle h1 {background-image: url(../../assets/title_h_bg.gif);} |
---|
13 | </style> |
---|
14 | |
---|
15 | <link rel="stylesheet" type="text/css" href="../../assets/dpSyntaxHighlighter.css"> |
---|
16 | <link type="text/css" rel="stylesheet" href="../../build/cssfonts/fonts-min.css" /> |
---|
17 | <script type="text/javascript" src="../../build/yui/yui-min.js"></script> |
---|
18 | <link href="assets//anim.css" rel="stylesheet" type="text/css"> |
---|
19 | |
---|
20 | </head> |
---|
21 | <body id="yahoo-com" class=" yui-skin-sam"> |
---|
22 | <div id="custom-doc" class="yui-t2"> |
---|
23 | <div id="hd"> |
---|
24 | <div id="ygunav"> |
---|
25 | <p> |
---|
26 | <em> |
---|
27 | <a href="http://developer.yahoo.com/yui/3/">YUI 3.x Home</a> <i> - </i> |
---|
28 | </em> |
---|
29 | </p> |
---|
30 | <form action="http://search.yahoo.com/search" id="sitesearchform"> |
---|
31 | <input name="vs" type="hidden" value="developer.yahoo.com"> |
---|
32 | <input name="vs" type="hidden" value="yuiblog.com"> |
---|
33 | <div id="sitesearch"> |
---|
34 | <label for="searchinput">Site Search (YDN & YUIBlog): </label> |
---|
35 | <input type="text" id="searchinput" name="p"> |
---|
36 | <input type="submit" value="Search" id="searchsubmit" class="ygbt"> |
---|
37 | </div> |
---|
38 | </form> |
---|
39 | </div> |
---|
40 | <div id="ygma"><a href="../../"><img src="../../assets/logo.gif" border="0" width="200" height="93"></a></div> |
---|
41 | <div id="pagetitle"><h1>YUI Library Examples: Animation Utility: Chaining Animations Using the <code>end</code> Event</h1></div> |
---|
42 | </div> |
---|
43 | <div id="bd"> |
---|
44 | |
---|
45 | <div id="bar-note"><p><strong>Note:</strong> This is YUI 3.x. Looking for <a href="http://developer.yahoo.com/yui/">YUI 2.x</a>?</p></div> |
---|
46 | |
---|
47 | <div id="yui-main"> |
---|
48 | <div class="yui-b"> |
---|
49 | <div class="yui-ge"> |
---|
50 | <div class="yui-u first example" id="main"> |
---|
51 | |
---|
52 | <h2>Animation Utility: Chaining Animations Using the <code>end</code> Event</h2> |
---|
53 | |
---|
54 | <div id="example" class="promo"> |
---|
55 | <p> |
---|
56 | <p>This demonstrates how to use the <code>end</code> event to chain animations runs together.</p> |
---|
57 | <p> Click the X in the header to fade the element out, then shrink its height to zero.</p> |
---|
58 | |
---|
59 | </p> |
---|
60 | |
---|
61 | <div class="module example-container "> |
---|
62 | <div class="hd exampleHd"> |
---|
63 | <p class="newWindowButton yui-skin-sam"> |
---|
64 | <a href="anim-chaining_clean.html" target="_blank">View example in new window.</a> |
---|
65 | </p> |
---|
66 | </div> <div id="example-canvas" class="bd"> |
---|
67 | |
---|
68 | |
---|
69 | <!--BEGIN SOURCE CODE FOR EXAMPLE =============================== --> |
---|
70 | |
---|
71 | |
---|
72 | <div id="demo" class="yui-module"> |
---|
73 | <div class="yui-hd"> |
---|
74 | <h4>Animation Demo</h4> |
---|
75 | <a title="remove module" class="yui-remove"><em>x</em></a> |
---|
76 | </div> |
---|
77 | <div class="yui-bd"> |
---|
78 | <p>This an example of what you can do with the YUI Animation Utility.</p> |
---|
79 | <p><em>Follow the instructions above to see the animation in action.</em></p> |
---|
80 | </div> |
---|
81 | </div> |
---|
82 | <p>This is placeholder text used to demonstrate how the above animation affects subsequent content.</p> |
---|
83 | <script type="text/javascript"> |
---|
84 | YUI({base:"../../build/", timeout: 10000}).use("anim-base", "anim-easing", function(Y) { |
---|
85 | var anim = new Y.Anim({ |
---|
86 | node: '#demo', |
---|
87 | to: { opacity: 0 } |
---|
88 | }); |
---|
89 | |
---|
90 | var onEnd = function() { |
---|
91 | this.unsubscribe('end', onEnd); |
---|
92 | this.setAtts({ |
---|
93 | to: { height: 0 }, |
---|
94 | easing: Y.Easing.bounceOut |
---|
95 | }); |
---|
96 | this.run(); |
---|
97 | }; |
---|
98 | |
---|
99 | anim.on('end', onEnd); |
---|
100 | |
---|
101 | Y.get('#demo .yui-remove').on('click', anim.run, anim); |
---|
102 | |
---|
103 | }); |
---|
104 | |
---|
105 | </script> |
---|
106 | |
---|
107 | <!--END SOURCE CODE FOR EXAMPLE =============================== --> |
---|
108 | |
---|
109 | |
---|
110 | </div> |
---|
111 | </div> |
---|
112 | </div> |
---|
113 | |
---|
114 | <h3>Setting up the HTML</h3> |
---|
115 | <p>First we add some HTML to animate.</p> |
---|
116 | <textarea name="code" class="JScript" cols="60" rows="1"> |
---|
117 | <div id="demo" class="yui-module"> |
---|
118 | <div class="yui-hd"> |
---|
119 | <h4>Animation Demo</h4> |
---|
120 | <a title="remove module" class="yui-remove"><em>x</em></a> |
---|
121 | </div> |
---|
122 | <div class="yui-bd"> |
---|
123 | <p>This an example of what you can do with the YUI Animation Utility.</p> |
---|
124 | <p><em>Follow the instructions above to see the animation in action.</em></p> |
---|
125 | </div> |
---|
126 | </div> |
---|
127 | </textarea> |
---|
128 | |
---|
129 | <h3>Creating the Anim Instance</h3> |
---|
130 | <p>Now we create an instance of <code>Y.Anim</code>, passing it a configuration object that includes the <code>node</code> we wish to animate and the <code>to</code> attribute containing the properties to be transitioned and final values.</p> |
---|
131 | |
---|
132 | <textarea name="code" class="JScript" cols="60" rows="1"> |
---|
133 | var anim = new Y.Anim({ |
---|
134 | node: '#demo', |
---|
135 | to: { |
---|
136 | opacity: 0 |
---|
137 | } |
---|
138 | }); |
---|
139 | </textarea> |
---|
140 | |
---|
141 | <h3>Handling the End Event</h3> |
---|
142 | <p>We will need a function to run when the <code>end</code> event fires. Note that the context of our handler defaults to <code>anim</code>, so <code>this</code> refers to our Anim instance inside the handler.</p> |
---|
143 | <textarea name="code" class="JScript" cols="60" rows="1"> |
---|
144 | var onEnd = function() { |
---|
145 | this.unsubscribe('end', onEnd); |
---|
146 | this.setAtts({ |
---|
147 | to: { height: 0 }, |
---|
148 | easing: Y.Easing.bounceOut |
---|
149 | }); |
---|
150 | this.run(); |
---|
151 | }; |
---|
152 | </textarea> |
---|
153 | <h3>Listening for the End Event</h3> |
---|
154 | <p>Now we will use the <code>on</code> method to subscribe to the <code>end</code> event, passing it our handler.</p> |
---|
155 | |
---|
156 | <textarea name="code" class="JScript" cols="60" rows="1"> |
---|
157 | anim.on('end', onEnd); |
---|
158 | </textarea> |
---|
159 | |
---|
160 | <h3>Running the Animation</h3> |
---|
161 | <p>Finally we add an event handler to run the animation.</p> |
---|
162 | <textarea name="code" class="JScript" cols="60" rows="1"> |
---|
163 | Y.get('#demo .yui-remove').on('click', anim.run, anim); |
---|
164 | </textarea> |
---|
165 | |
---|
166 | <h3>Full Script Source</h3> |
---|
167 | <textarea name="code" class="JScript" cols="60" rows="1"> |
---|
168 | YUI().use('anim', function(Y) { |
---|
169 | var anim = new Y.Anim({ |
---|
170 | node: '#demo', |
---|
171 | to: { opacity: 0 } |
---|
172 | }); |
---|
173 | |
---|
174 | var onEnd = function() { |
---|
175 | this.unsubscribe('end', onEnd); |
---|
176 | this.setAtts({ |
---|
177 | to: { height: 0 }, |
---|
178 | easing: Y.Easing.bounceOut |
---|
179 | }); |
---|
180 | this.run(); |
---|
181 | }; |
---|
182 | |
---|
183 | anim.on('end', onEnd); |
---|
184 | |
---|
185 | Y.get('#demo .yui-remove').on('click', anim.run, anim); |
---|
186 | |
---|
187 | }); |
---|
188 | </textarea> |
---|
189 | </div> |
---|
190 | <div class="yui-u sidebar"> |
---|
191 | |
---|
192 | |
---|
193 | <div id="examples" class="mod box4"> |
---|
194 | <div class="hd"> |
---|
195 | <h4> |
---|
196 | Animation Utility Examples:</h4> |
---|
197 | </div> |
---|
198 | <div class="bd"> |
---|
199 | <ul> |
---|
200 | <li><a href='../anim/basic.html'>Basic Animation</a></li><li><a href='../anim/easing.html'>Animation Easing</a></li><li><a href='../anim/colors.html'>Animating Colors</a></li><li><a href='../anim/alt-iterations.html'>Alternating Iterations</a></li><li><a href='../anim/anim-xy.html'>Animating XY Position</a></li><li><a href='../anim/curve.html'>Animating Along a Curved Path</a></li><li><a href='../anim/scroll.html'>Animated Scrolling</a></li><li><a href='../anim/reverse.html'>Reversing an Animation</a></li><li><a href='../anim/end-event.html'>Using the End Event</a></li><li class='selected'><a href='../anim/anim-chaining.html'>Chaining Animations Using the <code>end</code> Event</a></li> </ul> |
---|
201 | </div> |
---|
202 | </div> |
---|
203 | |
---|
204 | <div class="mod box4"> |
---|
205 | <div class="hd"> |
---|
206 | <h4>More Animation Utility Resources:</h4> |
---|
207 | </div> |
---|
208 | <div class="bd"> |
---|
209 | <ul> |
---|
210 | <!-- <li><a href="http://developer.yahoo.com/yui/anim/">User's Guide</a> (external)</li> --> |
---|
211 | <li><a href="../../api/module_anim.html">API Documentation</a></li> |
---|
212 | </ul> |
---|
213 | </div> |
---|
214 | </div> |
---|
215 | </div> |
---|
216 | </div> |
---|
217 | |
---|
218 | </div> |
---|
219 | </div> |
---|
220 | |
---|
221 | |
---|
222 | <div class="yui-b toc3" id="tocWrapper"> |
---|
223 | <!-- TABLE OF CONTENTS --> |
---|
224 | <div id="toc"> |
---|
225 | |
---|
226 | <ul> |
---|
227 | <li class="sect first">YUI 3.x Project</li><li class="item"><a title="The Yahoo! User Interface (YUI) Library, 3.x Branch, " href="http://developer.yahoo.com/yui/3/">YUI 3 Web Site (external)</a></li><li class="item"><a title="Examples of every YUI utility and control in action" href="../../examples/">YUI 3 Examples</a></li><li class="item"><a title="Instantly searchable API documentation for the entire YUI library." href="../../api/">YUI 3 API Docs</a></li><li class="item"><a title="The YUI Library can be downloaded from SourceForge" href="http://sourceforge.net/projects/yui/">YUI 3 on Sourceforge (external)</a></li><li class="item"><a title="YUI is free and open, offered under a BSD license." href="http://developer.yahoo.com/yui/3/license.html">YUI License (external)</a></li><li class="sect">YUI 3 Core - Examples</li><li class="item"><a title="YUI (Global Prerequisite) - Functional Examples" href="../../examples/yui/index.html">YUI (Global Prerequisite)</a></li><li class="item"><a title="Event - Functional Examples" href="../../examples/event/index.html">Event</a></li><li class="item"><a title="Node - Functional Examples" href="../../examples/node/index.html">Node</a></li><li class="sect">YUI 3 Component Infrastructure - Examples</li><li class="item"><a title="Attribute - Functional Examples" href="../../examples/attribute/index.html">Attribute</a></li><li class="item"><a title="Base - Functional Examples" href="../../examples/base/index.html">Base</a></li><li class="sect">YUI 3 Utilities - Examples</li><li class="item"><a title="Animation - Functional Examples" href="../../examples/anim/index.html">Animation</a></li><li class="item"><a title="Cookie - Functional Examples" href="../../examples/cookie/index.html">Cookie</a></li><li class="item"><a title="Drag & Drop - Functional Examples" href="../../examples/dd/index.html">Drag & Drop</a></li><li class="item"><a title="Get - Functional Examples" href="../../examples/get/index.html">Get</a></li><li class="item"><a title="IO - Functional Examples" href="../../examples/io/index.html">IO</a></li><li class="item"><a title="JSON (JavaScript Object Notation) - Functional Examples" href="../../examples/json/index.html">JSON</a></li><li class="item"><a title="Queue - Functional Examples" href="../../examples/queue/index.html">Queue</a></li><li class="sect">YUI 3 CSS - Examples</li><li class="item"><a title="YUI CSS Reset - Functional Examples" href="../../examples/cssreset/index.html">CSS Reset</a></li><li class="item"><a title="YUI Fonts - Functional Examples" href="../../examples/cssfonts/index.html">CSS Fonts</a></li><li class="item"><a title="YUI Grids - Functional Examples" href="../../examples/cssgrids/index.html">CSS Grids</a></li><li class="item"><a title="YUI Base - Functional Examples" href="../../examples/cssbase/index.html">CSS Base</a></li><li class="sect">The YUI Community</li><li class="item"><a title="The Yahoo! User Interface Blog" href="http://yuiblog.com">YUI Blog (external)</a></li><li class="item"><a title="The Yahoo! Group YDN-JavaScript hosts the YUI community forum" href="http://tech.groups.yahoo.com/group/ydn-javascript/">YUI Forum (external)</a></li><li class="item"><a title="The Yahoo! Group yui3 is dedicated to the 3.x branch of the Yahoo! User Interface (YUI) Library." href="http://tech.groups.yahoo.com/group/yui3/">YUI 3 Forum (external)</a></li><li class="item"><a title="YUI is used by Yahoo! and by hundreds of other sites, including many you know and love." href="/yui/poweredby/">YUI Sightings (external)</a></li><li class="item"><a title="Videos and podcasts from the YUI Team and from the Yahoo! frontend engineering community." href="http://developer.yahoo.com/yui/theater/">YUI Theater (external)</a></li><li class="sect">YUI Articles on the YUI Website</li><li class="item"><a title="Answers to Frequently Asked Questions about the YUI Library" href="http://developer.yahoo.com/yui/articles/faq/">YUI FAQ (external)</a></li><li class="item"><a title="Yahoo!'s philosophy of Graded Browser Support" href="http://developer.yahoo.com/yui/articles/gbs/">Graded Browser Support (external)</a></li><li class="item"><a title="Reporting Bugs and Making Feature Requests for YUI Components" href="http://developer.yahoo.com/yui/articles/reportingbugs/">Bug Reports/Feature Requests (external)</a></li><li class="item"><a title="Serve YUI source files from Yahoo! -- free, fast, and simple" href="http://developer.yahoo.com/yui/3/articles/hosting/">Serving YUI Files from Yahoo! (external)</a></li></ul> |
---|
228 | </div> |
---|
229 | </div> |
---|
230 | </div><!--closes bd--> |
---|
231 | |
---|
232 | <div id="ft"> |
---|
233 | <p class="first">Copyright © 2008 Yahoo! Inc. All rights reserved.</p> |
---|
234 | <p><a href="http://privacy.yahoo.com/privacy/us/devel/index.html">Privacy Policy</a> - |
---|
235 | <a href="http://docs.yahoo.com/info/terms/">Terms of Service</a> - |
---|
236 | <a href="http://docs.yahoo.com/info/copyright/copyright.html">Copyright Policy</a> - |
---|
237 | <a href="http://careers.yahoo.com/">Job Openings</a></p> |
---|
238 | </div> |
---|
239 | </div> |
---|
240 | <script src="../../assets/dpSyntaxHighlighter.js"></script> |
---|
241 | <script language="javascript"> |
---|
242 | dp.SyntaxHighlighter.HighlightAll('code'); |
---|
243 | </script> |
---|
244 | </body> |
---|
245 | </html> |
---|
246 | <!-- delightfuture.corp.yahoo.com uncompressed/chunked Wed Aug 13 16:45:30 PDT 2008 --> |
---|