Rico
Rico.loadModule('Corner','Effect');
var EffectDemo,div1,div2;
Rico.onLoad( function() {
EffectDemo = Class.create();
EffectDemo.prototype = {
initialize: function(element) {
this.animator = new Rico.Effect.Animator();
this.element = $(element);
this.startLeft = this.element.offsetLeft;
this.startSize = this.element.offsetWidth;
},
sizeEffectStarted: false,
positionEffectStarted: false,
fadeEffectStarted: false,
play: function(effect) {
this.animator.play(effect, {steps:20, duration:700});
},
togglePosition: function(){
this.play(new Rico.Effect.Position(this.element, this.nextPosition(), null));
},
toggleSize: function(){
this.play(new Rico.Effect.SizeAndPosition(this.element, null, null, this.nextSize(), null));
},
toggleSizeAndPosition: function(){
this.play(new Rico.Effect.SizeAndPosition(this.element, this.nextPosition(), null, this.nextSize(), null ));
},
togglePositionAndFade: function(){
this.play(new Rico.Effect.SizeAndPositionFade(this.element, this.nextPosition(), null, null, null, this.nextFadeState() ));
},
toggleFade: function(){
this.play(new Rico.Effect.FadeTo(this.element, this.nextFadeState()));
},
nextPosition: function(){
this.positionEffectStarted = !this.positionEffectStarted;
return !this.positionEffectStarted ? this.startLeft : 520;
},
nextSize: function(){
this.sizeEffectStarted = !this.sizeEffectStarted;
return !this.sizeEffectStarted ? this.startSize : 350;
},
nextFadeState: function(){
this.fadeEffectStarted = !this.fadeEffectStarted;
return !this.fadeEffectStarted ? 1 : 0;
}
};
Rico.Corner.round('effect_object_r', { useMoz: false }); // don't use native corner rounding in Gecko because animation leaves artifacts
div1=new EffectDemo('effect_object');
div2=new EffectDemo('effect_object_r');
});
body, p {
font-family : Trebuchet MS, Arial, Helvetica, sans-serif;
font-size : 11px;
}
h1 {
font-family : Trebuchet MS, Arial, Helvetica, sans-serif;
font-size: 16pt;
}
div.sizeMe {
width : 120px;
background-color : #c6c3de;
padding-top : 10px;
padding-bottom : 10px;
font-family : Arial;
font-size : 11px;
text-align : center;
position : absolute;
}
Rico Animation & Effects
Animate Size
Fade Out/Fade In
Animate Position
Animate Position & Size
Animate Position & Fade
Inner div content
Inner div content