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

Demo

Note

Extends

Syntax

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

Arguments

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

Options

  • 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.

Properties

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

Examples

// 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.
});

Note

  • 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.

Syntax

myFx.slideIn([mode]);

Arguments

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

Returns

  • (object) This Fx.Slide instance.

Examples

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

Slides the Element out of view horizontally or vertically.

Syntax

myFx.slideOut([mode]);

Arguments

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

Returns

  • (object) This Fx.Slide instance.

Examples

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.

Syntax

myFx.toggle([mode]);

Arguments

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

Returns

  • (object) This Fx.Slide instance.

Examples

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.

Syntax

myFx.hide([mode]);

Arguments

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

Returns

  • (object) This Fx.Slide instance.

Examples

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.

Syntax

myFx.show([mode]);

Arguments

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

Returns

  • (object) This Fx.Slide instance.

Examples

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.

Syntax

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

Arguments

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

Returns

  • (element) this element

Example

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

Syntax

el.get('slide');

Returns

  • (object) the Fx.Slide instance

Examples

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.

Syntax

myElement.slide(how);

Arguments

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

Returns

  • (element) this Element.

Examples

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