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;
}
