From ProtoScript
YUI:Move Behavior
Move the selected element or elements.
Example
$proto('img#avatar', {
Click: {
onClick: {
Move: {
points: {by: [50,40] },
duration: 0.75
}
}
}
});
The protoscript above says: for an image with id avatar, move it 50 pixels to the right and 40 pixels down. Complete the animated move in 3/4 seconds.
Attributes
| Name
| Description
| Default
| Valid Values
| Example
|
| target
| Selected element or elements to fade.
| 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
| 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.
| Animate: { opacity: { from:1.0, to:0.5 } } - fade to halfway transparent
|
| 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
| method: YAHOO.utilEasing.easeIn
|
| points
| Animate the move by changing the location of the object.
| no default
| Use numeric property setting described below
| points: { to: [100, 150] }. Move the object to the position (100, 150) on the page.
|
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 Fade Demo
References
