Posted by Jim Nickel
on 16.12.2007 20:01
Attachment: effect_animation.html
Hi Matt,

I have updated your examples to include a "Fade Out/Fade In" example and 
attached it here.

Can you include this in the next version?

Thanks,

Jim
Posted by Jim Nickel
on 16.12.2007 20:29
Attachment: effect_animation.html
I also have made a new class called SizeAndPositionFade so that you can 
fade the object in/out as you resize it.

I didn't see a way of playing more than one animation at a time, so I 
just combined the SizeAndPosition and the FadeTo.  Anway, here is the 
code to add to the ricoEffects.js

I have also included an updated effct_animation.html example to show 
usage.

Could this make it into production?

Rico.Effect.SizeAndPositionFade = Class.create();
Rico.Effect.SizeAndPositionFade.prototype = {
   initialize: function(element, x, y, w, h, value) {
      this.element = $(element);
      this.x = x || this.element.offsetLeft;
      this.y = y || this.element.offsetTop;
      if (!Prototype.Browser.IE || (document.compatMode && 
document.compatMode.indexOf("CSS")!=-1)) {
        this.pw = 
RicoUtil.nan2zero(Element.getStyle(this.element,'padding-left'))+RicoUtil.nan2zero(Element.getStyle(this.element,'padding-right'));
        this.pw += 
RicoUtil.nan2zero(Element.getStyle(this.element,'border-left-width'))+RicoUtil.nan2zero(Element.getStyle(this.element,'border-right-width'));
        this.ph = 
RicoUtil.nan2zero(Element.getStyle(this.element,'padding-top'))+RicoUtil.nan2zero(Element.getStyle(this.element,'padding-bottom'));
        this.ph += 
RicoUtil.nan2zero(Element.getStyle(this.element,'border-top-width'))+RicoUtil.nan2zero(Element.getStyle(this.element,'border-bottom-width'));
      } else {
        this.pw=0;
        this.ph=0;
      }
      this.w = w || this.element.offsetWidth;
      this.h = h || this.element.offsetHeight;
      this.opacity = Element.getStyle(this.element, 'opacity') || 1.0;
      this.target = Math.min(value, 1.0);
   },
   step: function(stepsToGo) {
        var left = this.element.offsetLeft + ((this.x - 
this.element.offsetLeft)/stepsToGo);
        var top = this.element.offsetTop + ((this.y - 
this.element.offsetTop)/stepsToGo);
        var width = this.element.offsetWidth + ((this.w - 
this.element.offsetWidth)/stepsToGo) - this.pw;
        var height = this.element.offsetHeight + ((this.h - 
this.element.offsetHeight)/stepsToGo) - this.ph;
        var style = this.element.style;
        var curOpacity = Element.getStyle(this.element, 'opacity');
        var newOpacity = curOpacity + (this.target - 
curOpacity)/stepsToGo
        Rico.Effect.setOpacity(this.element, 
Math.min(Math.max(0,newOpacity),1.0));
        style.left = left + "px";
        style.top = top + "px";
        style.width = width + "px";
        style.height = height + "px";
   }
}

Jim
Posted by Matt Brown
on 18.12.2007 04:21
Thanks for the contribution! I've made the update per your request. It 
is available now as SVN 238.

Matt