The slide effect slides an Element in horizontally or vertically. The contents will fold inside.

• Fx.Slide

• Fx.Slide requires the page to be in Standards Mode.

• Fx

var myFx = new Fx.Slide(element[, options]);

1. elements - (element) The element to slide.
2. options - (object, optional) All of Fx options in addition to mode and wrapper.

• mode - (string; defaults to 'vertical') String to indicate what type of sliding. Can be set to 'vertical' or 'horizontal'.
• wrapper - (element; defaults to this.element) Allows to set another Element as wrapper.
• hideOverflow - (boolean; defaults to true) automatically sets the overflow of the wrapper to overflow, otherwise it inherits from the element being wrapped.
• resetHeight - (boolean; defaults to false) Automatically resets the height of the wrapper when the slide unfold animation is completed, allowying to manipulate the content keeping it adjusting naturally.

1. open - (boolean) Indicates whether the slide element is visible.

// Hides the Element, then brings it back in with toggle and finally alerts
// when complete:
var mySlide = new Fx.Slide('container').hide().toggle().chain(function(){
    alert(mySlide.open); //Alerts true.
});

• To create the slide effect an additional Element (a "div" by default) is wrapped around the given Element. This wrapper adapts the margin from the Element. It's overflow is set to hidden and it has a fixed height.

Slides the Element in view horizontally or vertically.

myFx.slideIn([mode]);

1. mode - (string, optional) Override the passed in Fx.Slide option with 'horizontal' or 'vertical'.

• (object) This Fx.Slide instance.

var myFx = new Fx.Slide('myElement').slideOut().chain(function(){
    this.show().slideIn('horizontal');
});

Slides the Element out of view horizontally or vertically.

myFx.slideOut([mode]);

1. mode - (string, optional) Override the passed in Fx.Slide option with 'horizontal' or 'vertical'.

• (object) This Fx.Slide instance.

var myFx = new Fx.Slide('myElement', {
    mode: 'horizontal',
    //Due to inheritance, all the [Fx][] options are available.
    onComplete: function(){
        alert('Poof!');
    }
// The mode argument provided to slideOut overrides the option set.
}).slideOut('vertical');

Slides the Element in or out, depending on its state.

myFx.toggle([mode]);

1. mode - (string, optional) Override the passed in Fx.Slide option with 'horizontal' or 'vertical'.

• (object) This Fx.Slide instance.

var myFx = new Fx.Slide('myElement', {
    duration: 1000,
    transition: Fx.Transitions.Pow.easeOut
});

// Toggles between slideIn and slideOut twice:
myFx.toggle().chain(myFx.toggle);

Hides the Element without a transition.

myFx.hide([mode]);

1. mode - (string, optional) Override the passed in Fx.Slide option with 'horizontal' or 'vertical'.

• (object) This Fx.Slide instance.

var myFx = new Fx.Slide('myElement', {
    duration: 'long',
    transition: Fx.Transitions.Bounce.easeOut
});

// Automatically hides and then slies in "myElement":
myFx.hide().slideIn();

Shows the Element without a transition.

myFx.show([mode]);

1. mode - (string, optional) Override the passed in Fx.Slide option with 'horizontal' or 'vertical'.

• (object) This Fx.Slide instance.

var myFx = new Fx.Slide('myElement', {
    duration: 1000,
    transition: Fx.Transitions.Bounce.easeOut
});

// Slides "myElement" out.
myFx.slideOut().chain(function(){
    // Waits one second, then the Element appears without transition.
    this.show.delay(1000, this);
});

See Element.Properties.

Sets a default Fx.Slide instance for an element. Gets the previously setted Fx.Slide instance or a new one with default options.

el.set('slide'[, options]);

1. options - (object) the Fx.Morph options.

• (element) this element

el.set('slide', {duration: 'long', transition: 'bounce:out'});
el.slide('in');

el.get('slide');

• (object) the Fx.Slide instance

el.set('slide', {duration: 'long', transition: 'bounce:out'});
el.slide('in');

el.get('slide'); //the Fx.Slide instance

Custom Type to allow all of its methods to be used with any DOM element via the dollar function or document.id.

Slides this Element in view.

myElement.slide(how);

1. how - (string, optional) Can be 'in', 'out', 'toggle', 'show' and 'hide'. Defaults to 'toggle'.

• (element) this Element.

$('myElement').slide('hide').slide('in');