Fading Effect with YUI’s Animation Utility
In YUI's Animation Utility example page there are demonstrations on how to create color and motion animations. However I couldn't find an example for how to create fading effect. After spending some time on trying different approaches, I came up with this code snip:
var aniObj = new YAHOO.util.Anim(
'DOM reference or ID' ,
{ opacity: {from: 0, to: 1 } },
'duration in second',
'easing'
);
where easing can be one of the following:
YAHOO.util.Easing.backBoth YAHOO.util.Easing.backIn YAHOO.util.Easing.backOut YAHOO.util.Easing.bounceBoth YAHOO.util.Easing.bounceIn YAHOO.util.Easing.bounceOut YAHOO.util.Easing.easeBoth YAHOO.util.Easing.easeBothStrong YAHOO.util.Easing.easeIn YAHOO.util.Easing.easeInStrong YAHOO.util.Easing.easeNone YAHOO.util.Easing.easeOut YAHOO.util.Easing.easeOutStrong YAHOO.util.Easing.elasticBoth YAHOO.util.Easing.elasticIn YAHOO.util.Easing.elasticOut
What's Next
More interesting posts ...
Comments
2 Comments so far
Leave a Comment
If you would like to make a comment, please fill out the form below.
Attention
If you want to post source code, please wrap it with <pre> and </pre>
If you want to post source code, please wrap it with <pre> and </pre>
Loading ...
Google found this on the YUI dev site. It has an animated fade on the background mask.
http://developer.yahoo.com/yui/examples/container/panelphotobox/1.html
Hi, I found your blog on this new directory of WordPress Blogs at blackhatbootcamp.com/listofwordpressblogs. I dont know how your blog came up, must have been a typo, i duno. Anyways, I just clicked it and here I am. Your blog looks good. Have a nice day. James.