Class: Fx.Slide

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

Note:

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

Extends:

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

Options

1. mode - (string: defaults to 'vertical') String to indicate what type of sliding. Can be set to 'vertical' or 'horizontal'.
2. wrapper - (element: defaults to this.element) Allows to set another Element as wrapper.

Properties:

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

Notes:

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

Fx.Slide Method: slideIn

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');
});

Fx.Slide Method: slideOut

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');

Fx.Slide Method: toggle

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);

Fx.Slide Method: hide

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();

Fx.Slide Method: show

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

Hash: Element.Properties

See Element.Properties.

Element Property: slide

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');

Аргументы:

1. options - (object, optional) the Fx.Slide options. if passed in will generate a new instance.

Возвращает:

• (object) the Fx.Slide instance

Примеры:

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

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

Native: Element

Custom Native to allow all of its methods to be used with any DOM element via the dollar function $.

Element Method: slide

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');