Animate size
<!--
Apache License, Version 2.0
Revised from Rico 2.0 demo code.
-->
<!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>
<h1 style='float:left;'>Rico Animation & Effects</h1>
<p style='clear:both;'>
<table border='0'>
<tr>
<td>
<td><button onclick="div1.toggleSize(); div2.toggleSize();">Animate Size</button>
<td><button onclick="div1.toggleFade(); div2.toggleFade();">Fade Out/Fade In</button>
<tr>
<td><button onclick="div1.togglePosition(); div2.togglePosition();">Animate Position</button>
<td><button onclick="div1.toggleSizeAndPosition(); div2.toggleSizeAndPosition();">Animate Position & Size</button>
<td><button onclick="div1.togglePositionAndFade(); div2.togglePositionAndFade();">Animate Position & Fade</button>
</table>
<p>
<div id="effect_object" class="sizeMe" style="border: 6px solid black;">
<div style="height:50px; background-color:red;">Inner div content
</div>
</div>
<p style="height:100px;">
<div id="effect_object_r" class="sizeMe">
<div style="height:50px; background-color:red;">Inner div content
</div>
</div>
</body>
</html>
Related examples in the same category