Demo of Animate Behavior
Animating size
This shows how to animate the width & height of an element. In this example, clicking on the image will cause it to grow by 10 pixels (in both dimensions) in about 1/10 seconds and then shrink back to original size in the same amount of time. You can click here to restart the example.
$proto('img#avatar', {
Click: {
onClick: {
Animate: {
height: {by: 10},
width : {by: 10},
duration: 0.1,
onComplete: {
Animate: {
height: {by: -10},
width : {by: -10},
duration: 0.1
}
}
}
}
}
});
Click: {
onClick: {
Animate: {
height: {by: 10},
width : {by: 10},
duration: 0.1,
onComplete: {
Animate: {
height: {by: -10},
width : {by: -10},
duration: 0.1
}
}
}
}
}
});
For a full description of this behavior see the Animate Documentation Page.