This example animates the opacity of three images on mouseover and mouseout, using the ID_opacity property.
ID_opacity is a floating point number between 0 and 1.
The ID_opacity property performs the actions necessary to set the opacity of the control's peer in a cross-browser way, by setting one of the following:
| Browser | Style |
| Mozilla FireFox | -moz-opacity: n; |
| Internet Explorer | filter:alpha(opacity=n*100); |
| Others | opacity: n; |
ID_opacity, ID_mouseOver and ID_mouseOut are "expando" properties, which need a "j:" prefix to use them on html elements.
<j:Button opacity="10"/> -- No j: prefix needed on controls
or
<div j:opacity="10"/> -- j: prefix needed on elements
Notice that the two animators in this example are defined within the topmost j:App control.
Animators define an animation - but they doesn't specify who the animation applies to - they simply specifies what properties to change, and how to change them. This means you can reuse the same animator object to start animations on multiple controls - multiple animations can even be running on different controls at the same time. (Try moving the mouse quickly over the controls above).
The App control (which by default renders as a "div" on the page) is acting as the container for the Animator definitions.
All the controls within the App can share animators defined on the app itself - so you don't have to define the animators within each control.
This example uses sender.startAnimator() in a j:mouseOver event handler to start the animation on the "sender" - the control that sent the mouseOver event. You pass startAnimator the ID of an animator to start. startAnimator() then starts with the control its invoked on and searches up the control hierarchy, looking for an animator with the specified ID - in this case, when it hits the topmost App container it finds the animator there. Once it finds the animator it uses the animator to spawn a new animation on the control its invoked on - the image control in this case.