From ProtoScript
YUI:ColorAnimate Behavior
Animates the color of selected element or elements
Example
$proto('#box-target', {
Click: {
onClick: {
ColorAnimate: {
backgroundColor: { from:'#fff', to: '#FEF59B' },
borderTopColor: { from:'#2F6FAB', to: '#b3f' },
borderLeftColor: { from:'#2F6FAB', to: '#b3f' },
borderRightColor: { from:'#2F6FAB', to: '#b3f' },
borderBottomColor: { from:'#2F6FAB', to: '#b3f' },
duration: 0.5
}
}
}
});
Animate the backgroundColor from white to yellow in 0.5 seconds. Also animate the border from slate blue to purple.
Attributes
| Name
| Description
| Default
| Valid Values
| Example
|
| target
| Selected element or elements to animate.
| No value. If no value supplied, use the last targeted element. If value is supplied, use the element(s) selected by the target instead. See Element Scope
| String value denoting an interface element. See Selecting Elements
| Animate: { target:'#avatar' }
|
| duration
| How long the animation should last
| 0.5
| Value from 0.0 to 1.0. 0.0 denotes fully transparent. 1.0 denotes fully opaque.
| ColorAnimate: { color: { from:'#000', to: '#888' }, duration: 0.5 } - animate the text/line color from black to medium gray in 1/2 second
|
| method
| The animation method to use for easing transitions.
| YAHOO.util.Easing.easeOut
| 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
| ColorAnimate: { color: { from:'#000', to: '#888' }, animationMethod: YAHOO.util.Easing.easeOut } - animate the text/line color from black to medium gray in 1/2 second starting the animation slowly
|
| color
| Animate the color
| no default
| Valid hex representation of color
| Animate: { color: { to:'#dcdcdc' } } - animate from current color to a gray color (#dcdcdc)
|
| backgroundColor
| Animate the backgroundColor
| no default
| Valid hex representation of color
| Animate: { backgroundColor: { to:'#dcdcdc' } } - animate from current bg color to a gray color (#dcdcdc)
|
| borderTopColor
| Animate the top border color
| no default
| Valid hex representation of color
| Animate: { borderTopColor: { to:'#dcdcdc' } } - animate the top border's color from current color to a gray color (#dcdcdc)
|
| borderLeftColor
| Animate the left border color
| no default
| Valid hex representation of color
| Animate: { borderTopColor: { to:'#dcdcdc' } } - animate the left border's color from current color to a gray color (#dcdcdc)
|
| borderBottomColor
| Animate the bottom border color
| no default
| Valid hex representation of color
| Animate: { borderTopColor: { to:'#dcdcdc' } } - animate the bottom border's color from current color to a gray color (#dcdcdc)
|
| borderRightColor
| Animate the right border color
| no default
| Valid hex representation of color
| Animate: { borderTopColor: { to:'#dcdcdc' } } - animate the right border's color from current color to a gray color (#dcdcdc)
|
Numeric Attributes
| Numeric attribute
| Valid Values
| Description
| Usage
| Example
|
| by
| Any valid numeric for the given property.
| Start at the property's current value, change BY this much.
| Do not use with the TO attribute
| {by: 100}
|
| to
| Any valid numeric for the given property.
| Start at the property's current value, go TO this value.
| Do not use with the BY attribute
| {to: 100}
|
| from
| Any valid numeric for the given property.
| Ignore current value; start FROM this value.
|
| {from: 100}
|
| unit
| The unit to use for to, from or by attributes
| Any legal numeric unit (eg., 'px', 'pt', 'em', '%').
|
| {unit: 'em'}
|
Callbacks
| Name
| Description
|
| onStart
| Called when the animation starts.
|
| onTween
| Called on each frame of the animation.
|
| onComplete
| Called when the animation completes.
|
Demos
See ColorAnimate Demo
