2xAnim.html revision d98d5e2bbc3fcf2015c549dd94c4c0371b3fdbe7
<html>
<head>
<title>Chaining Animations Using <code>onComplete</code></title>
/*margin and padding on body element
can introduce errors in determining
element position and are not recommended;
we turn them off as a foundation for YUI
CSS treatments. */
body {
margin:0;
padding:0;
}
</style>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.6.0/build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.6.0/build/button/assets/skins/sam/button.css" />
<script>
// YUI._setup();
// YUI.use('node', 'compat');
</script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/animation/animation.js"></script>
<!--begin custom header content for this example-->
#animator {
background-color:#003366;
color:#fff;
height:15em;
width: 15em;
position:relative;
margin:1em;
padding:1em;
}
</style>
<!--end custom header content for this example-->
</head>
<body class=" yui-skin-sam">
<h1>Chaining Animations Using <code>onComplete</code></h1>
<div class="exampleIntro">
<p>A common use case for animation involves causing two or more animations to fire sequentially. This is known as <em>chaining</em>. It's easy to chain animations using the <a href="http://developer.yahoo.com/yui/animation/">YUI Animation Utility</a>'s custom events.</p>
<p>In this example, a color animation is set to fire <em>after</em> an animation of position. Click the button below to start the sequence.</p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
<!--markup for YUI Button Control-->
<span id="startAnim" class="yui-button yui-link-button">
<em class="first-child">
<a href="#" title="Click here to begin the chained animations.">Click here to begin the chained animations.</a>
</em>
</span>
<!--The animated element.-->
<div id="animator">
This element will animate position
and then color when you click the
button.
</div>
<script language="javascript">
if (typeof loadFirebugConsole == 'function') {
loadFirebugConsole();
}
var Y = YUI({
logExclude: ['Selector'],
modules: {
'2xanim': {
}
}
}).use('dump', 'node', 'compat', function(Y) {
//Setup the example once the animator div is present
//in the DOM.
YAHOO.util.Event.onAvailable("animator", function() {
//This is the first animation; this one will
//fire when the button is clicked.
var move = new YAHOO.util.Anim("animator", {
left: {from:0, to:75}
}, 1);
//This is the second animation; it will fire
//when the first animation is complete.
var changeColor = new YAHOO.util.ColorAnim("animator", {
backgroundColor: {from:"#003366", to:"#ff0000"}
}, 1);
//Here's the chaining glue: We subscribe to the
//first animation's onComplete event, and in
//our handler we animate the second animation:
move.onComplete.subscribe(function() {
});
//Here we set up our YUI Button and subcribe to
//its click event. When clicked, it will
//animate the first animation:
// var startAnim = new YAHOO.widget.Button("startAnim");
YAHOO.util.Event.on("startAnim", "click", function() {
//reset the color value to the start so that
//the animation can be run multiple times:
YAHOO.util.Dom.setStyle("animator", "backgroundColor", "#003366");
move.animate();
});
//You can also make use of the onStart and onTween
//custom events in Animation; here, we'll log all
//of changeColor's custom events and peek at their
//argument signatures:
changeColor.onStart.subscribe(function() {
YAHOO.log("changeColor animation is starting.", "info", "example");
});
changeColor.onTween.subscribe(function(s, o) {
YAHOO.log("changeColor onTween firing with these arguments: " +
YAHOO.lang.dump(o), "info", "example");
});
changeColor.onComplete.subscribe(function(s, o) {
YAHOO.log("changeColor onComplete firing with these arguments: " +
YAHOO.lang.dump(o), "info", "example");
});
});
});
</script>
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
<!--MyBlogLog instrumentation-->
<script type="text/javascript" src="http://track2.mybloglog.com/js/jsserv.php?mblID=2007020704011645"></script>
</body>
</html>
<script type="text/javascript" src="http://us.js2.yimg.com/us.js.yimg.com/lib/rt/rto1_78.js"></script><script>var rt_page="2012401649:FRTMA"; var rt_ip="209.131.62.113"; if ("function" == typeof(rt_AddVar) ){ rt_AddVar("ys", escape("AA5B9345"));}</script><noscript><img src="http://rtb.pclick.yahoo.com/images/nojs.gif?p=2012401649:FRTMA"></noscript><script language=javascript>
if(window.yzq_d==null)window.yzq_d=new Object();
window.yzq_d['Gc7VAdj8el4-']='&U=13eb1fp3a%2fN%3dGc7VAdj8el4-%2fC%3d289534.9603437.10326224.9298098%2fD%3dFOOT%2fB%3d4123617%2fV%3d1';
</script><noscript><img width=1 height=1 alt="" src="http://us.bc.yahoo.com/b?P=AgGVHEWTW6A9puoDSNmzugY00YM.cUjuYXIACoqy&T=143g8ff7l%2fX%3d1223582066%2fE%3d2012401649%2fR%3ddev_net%2fK%3d5%2fV%3d2.1%2fW%3dH%2fY%3dYAHOO%2fF%3d2799340710%2fQ%3d-1%2fS%3d1%2fJ%3dAA5B9345&U=13eb1fp3a%2fN%3dGc7VAdj8el4-%2fC%3d289534.9603437.10326224.9298098%2fD%3dFOOT%2fB%3d4123617%2fV%3d1"></noscript>
<!-- VER-533 -->
<script language=javascript>
if(window.yzq_p==null)document.write("<scr"+"ipt language=javascript src=http://l.yimg.com/us.js.yimg.com/lib/bc/bc_2.0.4.js></scr"+"ipt>");
</script><script language=javascript>
if(window.yzq_p)yzq_p('P=AgGVHEWTW6A9puoDSNmzugY00YM.cUjuYXIACoqy&T=13u4m5mc6%2fX%3d1223582066%2fE%3d2012401649%2fR%3ddev_net%2fK%3d5%2fV%3d1.1%2fW%3dJ%2fY%3dYAHOO%2fF%3d1328518472%2fS%3d1%2fJ%3dAA5B9345');
if(window.yzq_s)yzq_s();
</script><noscript><img width=1 height=1 alt="" src="http://us.bc.yahoo.com/b?P=AgGVHEWTW6A9puoDSNmzugY00YM.cUjuYXIACoqy&T=143h0n920%2fX%3d1223582066%2fE%3d2012401649%2fR%3ddev_net%2fK%3d5%2fV%3d3.1%2fW%3dJ%2fY%3dYAHOO%2fF%3d3413631591%2fQ%3d-1%2fS%3d1%2fJ%3dAA5B9345"></noscript>
<!-- p3.ydn.sp1.yahoo.com compressed/chunked Thu Oct 9 12:54:26 PDT 2008 -->