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
on 16.12.2007 20:01
on 16.12.2007 20:29
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
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


