We have a function - resizeAll()
Now, what does this function do?
Quite simple, if you read in my earlier post about the issue I found with YUI's animation class you would know what the purpose of this function does.
If you know NOTHING about what I speak, read my post here:
http://simplyprogram.com/yui-interesting-find/
Back to the function -- My initial test was to take one or many images and have them animate the EXACT SAME as the containing element. I am proud to say this has been accomplished!
So when we started this our code looked a little bit like this:
-
var attributes = {
-
width: { to: 0 },
-
height: { to: 0 },
-
opacity: { to: 1 },
-
fontSize: { from: 100, to: 0, unit: '%'}
-
};
-
-
var anim = new YAHOO.util.Anim(itemObj,
-
attributes, 1.0, YAHOO.util.Easing.backOut);
-
-
anim.animate();
With my new function in place our code looks like this:
-
var attributes = {
-
width: { to: 0 },
-
height: { to: 0 },
-
opacity: { to: 1 },
-
fontSize: { from: 100, to: 0, unit: '%'}
-
};
-
-
var anim = new YAHOO.util.Anim(itemObj,
-
attributes, 1.0,YAHOO.util.Easing.backOut);
-
-
anim.resizeAll();
-
anim.animate();
Thats it - Simply place anim.resizeAll() within your code and ALL images will take on the same attributes and animation method as your containing element.
What is next for this function?
I am now working to make it pretty much any element you could possibly want to animate!
On the priority list:
1. Other Divs
2. Other font tags
3. OBJECT Codes (Includes Flash 
)
4. Forms
I think that should do it for now. 
Until my next update!