CODEWITHSUNDEEP
javascriptmootools
gurpreet
gurpreet

Reputation: 31

MooTools fade in / fade out effect on a table

I am using MooTools library. I want my fade in fade out effect on table id

<table id="myId"></table>

i have working click event 

aNextCal.addEvent('click',function(){
    //Click Event working here i want fade in fadeout code 
    this.showNextWeek();
}.bind(this));`

Please suggest

Upvotes: 0

Views: 1028

Answers (2)

Danijel
Danijel

Reputation: 12689

Mootools has a method fade, which is intended for fading elements in/out.

myElement.fade([how]);

how = ('in', 'out', 'show', 'hide', 'toggle', number)

Example of use:

// simple example
$('myId').fade('out');

// setting up element with options
$('myId').set( 'tween', { 
    duration: 400,
    transition: 'quad:out'
});

$('myButton').addEvent('click', function(){
    $('myId').fade( 'toggle' );
});

Upvotes: 0

Adidi
Adidi

Reputation: 5253

There is the default fade function to every element

document.id('myId').fade('out'); //hide
document.id('myId').fade('in'); //show

If you need something more complex to control the effect use Tween:

new Fx.Tween('myId', {
    duration: 4000,
    property: 'opacity',
    onComplete: function(){
         alert('hide');   
    }
}).start(0);

Upvotes: 2

Related Questions