onComplete
A common use case for animation involves causing two or more animations to fire sequentially. This is known as chaining. It's easy to chain animations using the YUI Animation Utility's custom events.
In this example, a color animation is set to fire after an animation of position. Click the button below to start the sequence.
Chaining animations is easy to achieve in YUI's Animation Utility using the custom events that are built into your Animation instances. Here, we'll use the onComplete
event of one animation to kick off a second animation, creating a simple chain.
This example has the following dependencies:
1 | <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.6.0/build/button/assets/skins/sam/button.css"> |
2 | |
3 | <script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/yahoo-dom-event/yahoo-dom-event.js"></script> |
4 | <script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/element/element-beta-min.js"></script> |
5 | <script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/button/button-min.js"></script> |
6 | <script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/animation/animation.js"></script> |
view plain | print | ? |
In this example, we begin with to page elements: a YUI Button that will actuate the animation sequence and a simple <div>
that will animate in position and then in color. Here's the markup for these elements:
1 | <!--markup for YUI Button Control--> |
2 | <span id="startAnim" class="yui-button yui-link-button"> |
3 | <em class="first-child"> |
4 | <a href="#" title="Click here to begin the chained animations.">Click here to begin the chained animations.</a> |
5 | </em> |
6 | </span> |
7 | |
8 | <!--The animated element.--> |
9 | <div id="animator"> |
10 | This element will animate position |
11 | and then color when you click the |
12 | button. |
13 | </div> |
view plain | print | ? |
With these two elements in place, we can write our script. This script:
#animator
is ready on the page;move
;changeColor
;animate()
method to the onComplete
event of the first animation to cause chaining;animate()
method to the button's click
event;Here is the full script block for this example:
1 | //Setup the example once the animator div is present |
2 | //in the DOM. |
3 | YAHOO.util.Event.onAvailable("animator", function() { |
4 | |
5 | //This is the first animation; this one will |
6 | //fire when the button is clicked. |
7 | var move = new YAHOO.util.Anim("animator", { |
8 | left: {from: 0, to:75} |
9 | }, 1); |
10 | |
11 | //This is the second animation; it will fire |
12 | //when the first animation is complete. |
13 | var changeColor = new YAHOO.util.ColorAnim("animator", { |
14 | backgroundColor: {to:"#ff0000"} |
15 | }, 1); |
16 | |
17 | //Here's the chaining glue: We subscribe to the |
18 | //first animation's onComplete event, and in |
19 | //our handler we animate the second animation: |
20 | move.onComplete.subscribe(function() { |
21 | changeColor.animate(); |
22 | }); |
23 | |
24 | //Here we set up our YUI Button and subcribe to |
25 | //its click event. When clicked, it will |
26 | //animate the first animation: |
27 | var startAnim = new YAHOO.widget.Button("startAnim"); |
28 | startAnim.subscribe("click", function() { |
29 | move.animate(); |
30 | }); |
31 | |
32 | //You can also make use of the onStart and onTween |
33 | //custom events in Animation; here, we'll log all |
34 | //of changeColor's custom events and peek at their |
35 | //argument signatures: |
36 | changeColor.onStart.subscribe(function() { |
37 | YAHOO.log("changeColor animation is starting.", "info", "example"); |
38 | }); |
39 | |
40 | changeColor.onTween.subscribe(function(s, o) { |
41 | YAHOO.log("changeColor onTween firing with these arguments: " + |
42 | YAHOO.lang.dump(o), "info", "example"); |
43 | }); |
44 | |
45 | changeColor.onComplete.subscribe(function(s, o) { |
46 | YAHOO.log("changeColor onComplete firing with these arguments: " + |
47 | YAHOO.lang.dump(o), "info", "example"); |
48 | }); |
49 | }); |
view plain | print | ? |
INFO 0ms (+0) 11:09:29 PM:
global
Logger initialized
Note: You are viewing this example in debug mode with logging enabled. This can significantly slow performance.
onComplete
Copyright © 2008 Yahoo! Inc. All rights reserved.
Privacy Policy - Terms of Service - Copyright Policy - Job Openings