Demo of Fade Behavior
Fade Down, then Back Up
Here's an example that fades the image to 50% in 1 second, then fades back up to 100% (opaque) in 1/4 seconds.
// select the image with id='avatar'
$proto('#avatar', {
Click: {
// when they click
onClick: {
// fade it to 50% slowly
Fade: {
opacity: {to: 0.5},
duration: 1.0,
// when that finishes, fade it back up to 100% quickly
onComplete: {
Fade: {
opacity: {to: 1.0},
duration: 0.25
}
}
}
}
}
});
$proto('#avatar', {
Click: {
// when they click
onClick: {
// fade it to 50% slowly
Fade: {
opacity: {to: 0.5},
duration: 1.0,
// when that finishes, fade it back up to 100% quickly
onComplete: {
Fade: {
opacity: {to: 1.0},
duration: 0.25
}
}
}
}
}
});
For a full description of this behavior see the Fade Documentation Page.