Here is some code, partly ported from Scriptaculous, that does fade in/out effects.
The Scriptaculous code has a special getStyle() method. I wasn't clear on what exactly that did so I just changed those references to element.style.<attribute>.
I believe you could probably use MochiKit.DOM.computedStyle as a replacement to getStyle(). getStyle has a couple of compatibility hacks for Opera that replaces 'static' with 'auto' for position attributes.
http://dev.rubyonrails.org/browser/spinoffs/scriptaculous/lib/prototype.js
- Alastair Tse
Sample Usage
<html> <head> <script type="text/javascript" src="MochiKit.js"></script> <script type="text/javascript" src="effects.js"></script> </head> <body> <p> <a href="javascript:Effect.highlight($('hl'));">Highlight</a> the following: <div id="hl" style="width: 100px"> Highlight Me </div> </p> <p> <a href="javascript:Effect.fadeIn($('fi'));">Fade In</a> the following: <div id="fi" style="width: 100px; display: none"> Fade Me In </div> </p> <p> <a href="javascript:Effect.fadeOut($('fo'));">Fade Out</a> the following: <div id="fo" style="width: 100px"> Fade Me Out </div> </p> <p> <a href="javascript:Effect.pulse($('pulse'));">Pulse</a> the following: <div id="pulse" style="width: 100px"> Pulse </div> </p> </body> </html>
// // MochiKit effects // Effect = new function() { } Effect.Loop = function(callbacks) { this.maxSteps = -1; this.startStep = 0; this.curStep = 0; this.delay = .25; this.running = false; this.callbacks = callbacks; } update(Effect.Loop.prototype, { run: function() { this.running = true; this.done = false; this.loop(this); }, loop: function() { if( this.running == true && ( this.maxSteps != -1 && this.curStep < this.maxSteps) ) { this.callbacks.onStep(this); this.curStep++; setTimeout(bind(this.loop, this), this.delay); } else { if( this.callbacks.onDone ) this.callbacks.onDone(this); } } }); // based on the scriptaculous script Effect.highlight = function(element, options) { element = $(element); options = update({ time: 1, startColor: Color.fromHexString("#ffff99"), endColor: Color.fromBackground(element), numSteps: 8 }, options); var startRgb = options.startColor.asRGB(); var endRgb = options.endColor.asRGB(); var rgbDelta = { r: endRgb.r - startRgb.r, g: endRgb.g - startRgb.g, b: endRgb.b - startRgb.b }; var rgbSteps = { r: rgbDelta.r / options.numSteps, b: rgbDelta.b / options.numSteps, g: rgbDelta.g / options.numSteps } var curColor = clone(startRgb); var loop = new Effect.Loop({ onStep: function(loop) { curColor = { r: curColor.r + rgbSteps.r, g: curColor.g + rgbSteps.g, b: curColor.b + rgbSteps.b } element.style.backgroundColor = Color.fromRGB(curColor); }, onDone: function(loop) { element.style.backgroundColor = options.endColor; //options.endColor.toHexString(); } }); loop.maxSteps = options.numSteps; loop.delay = (options.time / options.numSteps) * 1000; loop.run() } Effect.pulse = function(element, options) { Effect.fadeOut(element, options); } /** * Fade an element in. * element - The element to fade in. * time - The time in seconds (can be a decimal) to fully fade in. */ Effect.fadeIn = function(element, options) { element = $(element); var curOpacity = 0.0; options = update({ time: 1, endOpacity: 1.0, step: .05 }, options); Effect.setOpacity(element, curOpacity); showElement(element); var loop = new Effect.Loop({ onStep: function(loop) { curOpacity += options.step; Effect.setOpacity(element, curOpacity); }, onDone: function(loop) { Effect.setOpacity(element, options.endOpacity); } }); loop.maxSteps = Math.floor((options.endOpacity - curOpacity) / options.step); loop.delay = (options.time / loop.maxSteps) * 1000; loop.run(); } /** * Fade an element out. * element - The element to fade out. * time - The time in seconds (can be a decimal) to fully fade out. */ Effect.fadeOut = function(element, options) { var curOpacity = Effect.getOpacity(element) || 1.0; options = update({ time: .5, endOpacity: 0.0, step: .05 }, options); var loop = new Effect.Loop({ onStep: function(loop) { Effect.setOpacity(element, curOpacity); curOpacity -= options.step; }, onDone: function(loop) { hideElement(element); } }); loop.maxSteps = Math.floor((curOpacity - options.endOpacity) / options.step); loop.delay = (options.time / loop.maxSteps) * 1000; loop.run(); } // // Taken from scriptaculous // Effect.setOpacity = function(element, value) { element = $(element); var els = element.style; if( value == 1 ) { els.opacity = '0.999999'; if( /MSIE/.test(navigator.userAgent) ) els.filter = element.style.filter.replace(/alpha\([^\)]*\)/gi, ''); } else { if( value < 0.00001 ) value = 0; els.opacity = value; if( /MSIE/.test(navigator.userAgent) ) els.filter = element.style.filter.replace(/alpha\([^\)]*\)/gi, '') + "alpha(opacity=" + value * 100 + ")"; } } // // Taken from scriptaculous // Effect.getOpacity = function(element) { var opacity; if( opacity = element.style.opacity ) return parseFloat(opacity); if( opacity = (element.style.filter || '').match(/alpha\(opacity=(.*)\)/) ) if( opacity[1] ) return parseFloat(opacity[1]) / 100; return 1.0; }
