|
TABLE
MAKE
CUSTOMIZE
EFFECTS
EFFECTS CYCLE
EFFECTS CYCLES
VIRTUAL BOX
PLUG-IN
GLIDER
|
Effects Toggle
Effects Toggle demo shows all the moo.rd Fx toggle effects.
You can toggle everything, either with or without transitions, either with or without special values. window.addEvent('domready', function() { var tgheight = new Fx.Toggle('tgheight', {duration:1000, link: 'cancel'}); var tgwidth = new Fx.Toggle('tgwidth', {duration:1000}); var tgopacity = new Fx.Toggle('tgopacity', {duration:1000}); var tgdisplay = new Fx.Toggle('tgdisplay', {duration:1000}); var tgvisib = new Fx.Toggle('tgvisib', {duration:1000}); var tgcolor = new Fx.Toggle('tgcolor', {duration:1000}); var tgheightval = new Fx.Toggle('tgheightval', {duration:1000}); var tgheightfx = new Fx.Toggle('tgheightfx', {duration:1000}); $('tgheight_start').addEvent('click', function(event) { tgheight.toggleHeight(); }); $('tgwidth_start').addEvent('click', function(event) { tgwidth.toggleWidth(); }); $('tgopacity_start').addEvent('click', function(event) { tgopacity.toggleOpacity(); }); $('tgdisplay_start').addEvent('click', function(event) { tgdisplay.toggleProperty('display', 'none', 'block'); }); $('tgvisib_start').addEvent('click', function(event) { tgvisib.toggleProperty('visibility', 'hidden', 'visible'); }); $('tgcolor_start').addEvent('click', function(event) { tgcolor.toggleProperty('color', '#FFFFFF', '#F4ABA8'); }); $('tgheightval_start').addEvent('click', function(event) { tgheightval.toggleProperty('height', '150px', '200px', false); }); $('tgheightfx_start').addEvent('click', function(event) { tgheightfx.toggleProperty('height', 150, 200, true); }); }); |