Fading Effect with YUI’s Animation Utility

Posted on May 2, 2008
Filed Under Javascript | 9 Comments

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

If you find this post useful, consider donating a few bucks to help the server running cost.

Go to Top

More interesting posts ...

No Related Post

Subscribe to keep track of your comment.

9 Comments so far

Derek May 25, 2008 10:26 pm

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
James September 18, 2008 7:58 am

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.
apaphinund December 19, 2008 4:06 am

???? ???? ???...
Narkneesee December 19, 2008 5:06 am

??????? ?? ??????.. ????????? ??? ??????.. ????? ???? ??? ??????????.
www jackpotjoypromotionsbingo com January 22, 2009 9:00 pm

<strong>www jackpotjoypromotionsbingo com...</strong>

incorporated connote slackly triviality:...
Balmiko March 11, 2009 6:57 am

????????, ? ? ?????? ? ???? ???????? ??? ??????. ??????? ???????! : ??? ?? [? ???? ????????? ?? ?????????? ?????
Photoshop May 3, 2009 10:21 pm

? ???????????? ??????????? ????, ??????!
Design web - director.romportal.ro May 6, 2009 9:58 pm

[...] Fading Effect with YUI’s Animation Utility | Code Central [...]
Admittyamasy May 17, 2009 10:33 pm

???????, ? ? ??? ???? RSS ????? ? ???? ??????