YUI Library JavaScript DHTML

  1. Home
  2. JavaScript DHTML
  3. YUI Library
  4. Chaining Animations Using onComplete



Chaining Animations Using <code>onComplete</code>







  #animator {
    background-color:#003366; 
    color:#fff; 
    height:15em; 
    width: 15em; 
    position:relative;
    margin:1em;
    padding:1em;
  }




    
        Click here to begin the chained animations.
    



  This element will animate position
    and then color when you click the 
    button.


//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() {
    changeColor.animate();
  });
  
  //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");
  startAnim.subscribe("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();
  });
  
  changeColor.onStart.subscribe(function() {
  });
  changeColor.onTween.subscribe(function(s, o) {
  });
  
  changeColor.onComplete.subscribe(function(s, o) {
  });
});



   
  
yui_2.7.0b.zip( 4,431 k)