JavaScript DHTML/Rico/Fade
Fade out/ fade in
<source lang="html4strict">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" > <title>Rico</title> <script src="rico21/src/rico.js" type="text/javascript"></script> <script type="text/javascript"> 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");
}); </script> <style type="text/css"> 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;
} </style>
</head>
<body>
Rico Animation & Effects
| <button onclick="div1.toggleSize(); div2.toggleSize();">Animate Size</button> | <button onclick="div1.toggleFade(); div2.toggleFade();">Fade Out/Fade In</button> | |
| <button onclick="div1.togglePosition(); div2.togglePosition();">Animate Position</button> | <button onclick="div1.toggleSizeAndPosition(); div2.toggleSizeAndPosition();">Animate Position & Size</button> | <button onclick="div1.togglePositionAndFade(); div2.togglePositionAndFade();">Animate Position & Fade</button> |
Inner div content
<p style="height:100px;">
Inner div content
</body> </html>
</source>