Opened 12 years ago

Closed 12 years ago

#6244 closed enhancement (fixed)

dojo.fadeInTo and fadeOutTo Ehancement in dojox.fx?

Reported by: guest Owned by: dante
Priority: high Milestone: 1.2
Component: Dojox Version: 1.0
Keywords: Cc: ole.ersoy@…
Blocked By: Blocking:

Description (last modified by dante)

HI,

I started hunting through the dojo.fadeIn/Out code to see how a node could be faded out or in to a specified opacity. Looking at the methods one discovers that the end and begin properties contain the opacity, but there's no way to override that using simply fadeIn or fadeOut. When fading out one has to fadeOut to opacity 0, and when fading in one has to fade in to Opacity 1.

After a little more research one finds out that dojo uses animateProperty to achieve the fading. So one could do something like this (dojox.fx.fadeInTo(args):

Note that we should probably check whether args.node is a string or a node

var node = dojo.byId(args.node);

var args = { node,

duration: 1000, properties: {

opacity: { start:node.style.opacity,

end:0.80

}

}

};

return dojo.animateProperty(args);

It would be nice though if there was a set of utility methods like this:

dojox.fx.fadeInTo dojox.fx.fadeOutTo

I think most users would look for this first.

Cheers,

  • Ole

Change History (7)

comment:1 Changed 12 years ago by guest

Scratch the InTo? / OutTo?. Since the starting point is always provided by the node, all that is needed is a dojox.fx.fadeTo(). Here's an implentation that's tested:

dojox.fx.fadeTo = function(/*Object*/ args) {

summary: Creates an animation that will fade a node from its current opacity to a specified opacity.

example: | | dojox.fx.fadeInTo({ node: 'myNode', | duration: 1200, | end:0.9, | }).play();

var node = dojo.byId(args.node);

args = {

node: node,

duration: args.duration, easing: args.easing, properties: {

opacity: { start:node.style.opacity,

end:args.end,

}

}

};

return dojo.animateProperty(args);

}

comment:2 Changed 12 years ago by guest

Some test code and test nodes:

dojo.require("dojox.fx.easing"); dojox.fx.fadeTo({ node: 'testFadeInTo',

duration: 1200, end:0.9, easing: dojox.fx.easing.easeIn

}).play();

dojox.fx.fadeTo({ node: 'testFadeOutTo',

duration: 1200, end:0.2

}).play();

<h1 id="testFadeInTo" style="height:40px; width:200px; opacity: 0;"> CHECK THE PARTIAL FADE IN ACTION </h1>

<h1 id="testFadeOutTo" style="height:40px; width:200px; opacity: 1;"> CHECK THE PARTIAL FADE OUT ACTION </h1>

comment:3 Changed 12 years ago by dante

Owner: changed from anonymous to dante

what about

dojox.fx.fadeTo = function(args){
 args.node = dojo.byId(args.node);
 return dojo._fade(args);
};

then you would

dojox.fx.fadeTo({ node: "someNode", end:0.75 }).play();

probably don't even need the byId check.

comment:4 Changed 12 years ago by guest

I commented out the "long" version of dojox.fx.fadeTo and substituted with yours and the tests still run the same. Me likes it.

Thanks,

  • Ole

comment:5 Changed 12 years ago by guest

Just a quick check. I assume the _fade means that dojo._fade is "private". If that's the case should dojox.fx.sizeTo be using it?

comment:6 Changed 12 years ago by bill

Component: GeneralDojox
Milestone: 1.2

Setting milestone so this doesn't show up on 1.1 report.

comment:7 Changed 12 years ago by dante

Description: modified (diff)
Resolution: fixed
Status: newclosed

fixed in [13417]

Note: See TracTickets for help on using tickets.