Mootools 1.2 tutorial sliding effect (Slide)_Mootools

Basic Usage
Like all the classes we have seen before, when we apply this class to an element, the first thing we have to do is to initialize a new Fx.Slide instance.
First, let’s create an HTML file for the sliding element.
Reference code:

Copy code The code is as follows:

Here is the content to be displayed by sliding.

Our CSS doesn’t need any modification either.
Reference code:

Copy code The code is as follows:

.slide {
margin: 20px 0;
padding: 10px;
width: 200px;
background-color: #DAF7B4;
}

Finally, let’s initialize a new Fx.Slide and pass it our element variable.
Reference code:

Copy code The code is as follows:

var slideElement = $(' slide_element');
var slideVar = new Fx.Slide(slideElement, {
// Fx.Slide options
mode: 'vertical', // The default is 'vertical' (vertical)
/ / Fx option
transition: 'sine:in',
duration: 300,
// Fx event
onStart: function(){
$('start').highlight(" #EBCC22");
}
});

Since Fx.Slide is an extension of Fx, you can use any options and events of Fx, but Fx.Slide also has Some options of your own.
Fx.Slide options
Fx.Slide has only two options - "mode" and "wrapper". Frankly, I've never found myself using "wrapper" (I've never encountered the need), but "mode" determines whether you want to slide horizontally or vertically.
mode (mode)
Mode gives you two choices - "vertical" or "horizontal". Vertical is displayed from top to bottom, horizontal is displayed from left to right. There is no bottom to top or right to left option here. But I know it's relatively simple to modify the class itself to implement these functions. In my opinion I would still like this to become a standard option, if anyone has modified this class to allow these options please drop us a line.
wrapper
By default, Fx.Slide will add a wrapper outside your sliding element and assign the value of its "overflow" attribute to "hidden". wrapper allows you to set other elements as wrappers for this element. Like I said above, I don't know where it would be used, and I'd be interested in hearing any thoughts on this. (Thanks to horseweapon from mooforum.net for making me understand this.)
Methods of Fx.Slide
Fx.Slide also provides many methods to show or hide elements.
.slideIn()
As the name tells you, this method triggers the start time and displays your element.
.slideOut()
Slide the element to the hidden state.
.toggle()
This method may show or hide the element, and the result depends entirely on the current state of the element. Very useful for click events.
.hide()
This will hide the element but not use the sliding effect.
.show()
This will show the element but not use the sliding effect.
Reset mode options through methods
Each of the above methods can accept an optional mode parameter, allowing you to override previously set options.
Reference code:

Copy code The code is as follows:

slideVar.slideIn('horizontal ');

Fx.Slide shortcut
The Fx.Slide class also provides some very convenient shortcuts to add sliding effects to elements.
.set('slide');
You can create a new slide instance by adding a slide object to the element through the set method without initializing a new class.
Reference code:

Copy code The code is as follows:

slideElement.set('slide ');

Set options
You can even set options through shortcuts:
Reference code:

Copy code The code is as follows:

slideElement.set('slide', {duration: 1250});

.slide()
Once a slide is set using the .set() method, you can initialize it using the .slide() method.
Reference code:

Copy code The code is as follows:

slideElement.slide('in');

The
.slide method can accept the following parameters:
'in'
'out'
'toggle'
'show'
'hide'
Each parameter corresponds to the method above.
Code examples
The above basically covers all basic usage. The example below will use most of what we learned above to show a few different sliding elements and provide some divs as indicators so you can clearly see these events.
First, create the HTML file.
Reference code:

Copy code The code is as follows:

Start

Cancel

Complete

open A
close A

Here is some content - A. Notice the delay before onComplete fires. This is due to the transition effect, the onComplete will not fire until the slide element stops "elasticing." Also, notice that if you click back and forth, it will "cancel" the previous call and give the new one priority.

open B
close B

toggle C

Here is some content - C

toggle D

Here is some content - D. Notice how I am not hooked into any events. This was done with the .slide shortcut.

toggle E

Here is some content - E

Next is the CSS file. We keep it as simple as possible.
Reference code:

Copy code The code is as follows:

.ind {
width: 200px;
padding: 10px;
background-color: #87AEE1;
font-weight: bold;
border-bottom: 1px solid white;
}
.slide {
margin: 20px 0;
padding: 10px;
width: 200px;
background-color: #DAF7B4;
}
#slide_wrap {
padding: 30px;
background-color: #D47000;
}

Finally, our Mootools JavaScript code:
Reference code:

Copy code The code is as follows:

window.addEvent('domready', function() {
// Example A
var slideElement = $('slideA');
var slideVar = new Fx.Slide(slideElement , {
// Fx.Slide option
mode: 'horizontal', // The default is 'vertical'
//wrapper: this.element, // The default is this.element
// Fx options
link: 'cancel',
transition: 'elastic:out',
duration: 'long',
// Fx event
onStart: function(){
$('start').highlight("#EBCC22");
},
onCancel: function(){
$('cancel').highlight("#EBCC22");
},
onComplete: function(){
$('complete').highlight("#EBCC22");
}
}).hide().show().hide() ; // Note that the .hide and .show methods do not trigger events
$('openA').addEvent('click', function(){
slideVar.slideIn();
});
$('closeA').addEvent('click', function(){
slideVar.slideOut();
});
// Example B
var slideElementB = $( 'slideB');
var slideVarB = new Fx.Slide(slideElementB, {
// Fx.Slide options
mode: 'vertical', // The default is 'vertical'
// Fx Options
// Note: The chain effect allows you to click multiple times,
// When the mouse leaves,
// the animation of each click can be triggered in sequence
link: 'chain',
// Fx event
onStart: function(){
$('start').highlight("#EBCC22");
},
onCancel: function(){
$('cancel').highlight("#EBCC22");
},
onComplete: function(){
$('complete').highlight("#EBCC22");
}
});
$('openB').addEvent('click', function(){
slideVarB.slideIn();
});
$('closeB ').addEvent('click', function(){
slideVarB.slideOut();
});
// Example C
var slideElementC = $('slideC');
var slideVarC = new Fx.Slide(slideElementC, {
// Fx.Slide options
mode: 'vertical', // The default is 'vertical'
//wrapper: this.element, // The default is this.element
// Fx options
//link: 'cancel',
transition: 'sine:in',
duration: 300,
// Fx event
onStart: function(){
$('start').highlight("#EBCC22");
},
onCancel: function(){
$('cancel').highlight ("#EBCC22");
},
onComplete: function(){
$('complete').highlight("#EBCC22");
}
}).hide ();
$('openC').addEvent('click', function(){
slideVarC.toggle();
});
$('slideD').slide( 'hide');
$('openD').addEvent('click', function(){
$('slideD').slide('toggle');
});
//Example C
var slideElementE = $('slideE');
var slideWrap = $('slide_wrap');
var slideVarE = new Fx.Slide(slideElementE, {
// Fx.Slide options
//mode: 'vertical', // The default is 'vertical'
wrapper: slideWrap // The default is this.element
}).hide();
$( 'openE').addEvent('click', function(){
slideVarE.toggle();
});
});

Learn more…

Fx.Slide is a multifunctional and very useful plug-in. To learn more, check out the Fx.Slide Documentation, Fx.Morph and the Fx Documentation .

Also, be sure to read our tutorial about Fx.Morph and Fx Options and Events.

Download the zip file of the final example code

Contains everything you need to get started.