seth
Nov 24th, 2007
Nov 24th, 2007
Fade to DIV with MooFX
Here's a quick example of fading in/out of divs with Moofx. In order to use this, you will need two href tags with ids, and two divs to fade in and out of. Read the code comments for more instruction:
/* Set default opacities
* When the page loads, display the gallery;
* Turn off the display of the specials page;
* Also turn down the opacity.
*/
Window.onDomReady(function(){
$('gallery').setOpacity(1);
$('specials').setOpacity(0);
$('specials').setStyle('display','none');
})
/* Attach events to the href ids that you will be using to trigger the events;
* In this example, I have two divs to toggle, specials and gallery.
* When one div is toggled, make sure to toggle off the other div first.
* Also make sure to set your opacity to 0 before displaying.
* If not, your div will display in full before doing the actual fade in.
*/
$('show_gallery').addEvent('click', function(e){
$('specials').setStyle('display','none');
$('gallery').setOpacity(0);
$('gallery').setStyle('display','');
var myFx = new Fx.Style('gallery', 'opacity').start(0,1);
});
$('show_specials').addEvent('click', function(e){
$('gallery').setStyle('display','none');
$('specials').setOpacity(0);
$('specials').setStyle('display','');
var myFx = new Fx.Style('specials', 'opacity').start(0,1);
});