views:

499

answers:

2

I would like to fadeIn a node over one second. Then leave it on for 10 seconds. Then fadeOut for another 3 seconds. One way of chaining this would be as follows:

dojo.fx.chain([
   dojo.fadeIn({node:myNode, duration:1000}), // fading in for 1 second
   dojo.fadeIn({node:myNode, duration:10000}), // this does nothing for 10 seconds
   dojo.fadeOut({node:myNode, duration:3000}) // fade out for 3 seconds
]).play();

In the previous code, the middle step is a very silly way of achieving nothing. Is there some sort of dojo.fx.sleep animation that does nothing for a specified length of time?

+1  A: 

Positive there isn't at this point in time; the only way to achieve the effect is to split your code into pre-sleep and post-sleep sections, which you've pretty much done here. The only thing I'd recommend is having Dojo do as little as possible during the 1o,ooo-millisecond duration; as you have it now, the fadeIn() method is being called and, while probably negligible, the fact that it is running at least one conditional statement (to check whether or not it needs to modify an opacity property), it is definitely a bit slower than just having the script do nothing.

Hexagon Theory
+1  A: 

I'm not a dojo user, but the common idiom from JQuery and Prototype is the delay property, which also seems to be present in Dojo:

dojo.addOnLoad(function() { 
  var animationArguments = {
    node: “testHeading”,
    duration: 1000,       // ms to run animation
    delay: 250            // ms to stall before playing
  };

  dojo.fadeOut(animationArguments).play();
});
Damien Wilson
Awesome! So simple!
pierdeux