Fade out/ fade in : Fade « Rico « JavaScript DHTML

Fade out/ fade in
 
<!--
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 &amp; 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>&nbsp;

<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;">&nbsp;

<div id="effect_object_r" class="sizeMe">
   <div style="height:50px; background-color:red;">Inner div content
   </div>
</div>

</body>
</html>
Fade out/ fade in : Fade « Rico « JavaScript DHTML

Related examples in the same category
