Class: Fx.Slide

Ефект слайду ковзає елемент горизонтально або вертикально. Вміст буде згорнуто всередині.

Примітка:

• Fx.Slide вимагає, щоб сторінка була в Standards Mode.

Розширює:

• Fx

Синтаксис:

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

Аргументи:

1. elements - (element) Елемент для ковзання.
2. options - (object, опціонально) Всі опції Fx крім mode та wrapper.

Опції

1. mode - (string: за замовчуванням 'vertical') Рядок для вказівки типу ковзання. Може бути встановлено на 'vertical' або 'horizontal'.
2. wrapper - (element: за замовчуванням this.element) Дозволяє встановити інший елемент як обгортку.

Властивості:

1. open - (boolean) Вказує, чи видимий елемент слайду.

Приклади:

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

Примітки:

• Для створення ефекту слайду додатковий елемент (за замовчуванням "div") обгортає заданий елемент. Ця обгортка адаптує margin від елемента.

Fx.Slide Method: slideIn

Ковзає елемент у видимій зоні горизонтально або вертикально.

Синтаксис:

myFx.slideIn([mode]);

Аргументи:

1. mode - (string, опціонально) Перевизначає передану опцію Fx.Slide на 'horizontal' або 'vertical'.

Повертає:

• (object) Цей екземпляр Fx.Slide.

Приклади:

var myFx = new Fx.Slide('myElement').slideOut().chain(function(){

    this.show().slideIn('horizontal');
});

Fx.Slide Method: slideOut

Ковзає елемент за межі видимої зони горизонтально або вертикально.

Синтаксис:

myFx.slideOut([mode]);

Аргументи:

1. mode - (string, опціонально) Перевизначає передану опцію Fx.Slide на 'horizontal' або 'vertical'.

Повертає:

• (object) Цей екземпляр Fx.Slide.

Приклади:

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

Ковзає елемент всередину або зовні, залежно від його стану.

Синтаксис:

myFx.toggle([mode]);

Аргументи:

1. mode - (string, опціонально) Перевизначає передану опцію Fx.Slide на 'horizontal' або 'vertical'.

Повертає:

• (object) Цей екземпляр Fx.Slide.

Приклади:

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

Ховає елемент без переходу.

Синтаксис:

myFx.hide([mode]);

Аргументи:

1. mode - (string, опціонально) Перевизначає передану опцію Fx.Slide на 'horizontal' або 'vertical'.

Повертає:

• (object) Цей екземпляр Fx.Slide.

Приклади:

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

Показує елемент без переходу.

Синтаксис:

myFx.show([mode]);

Аргументи:

1. mode - (string, опціонально) Перевизначає передану опцію Fx.Slide на 'horizontal' або 'vertical'.

Повертає:

• (object) Цей екземпляр Fx.Slide.

Приклади:

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

Див. Element.Properties.

Element Property: slide

Встановлює екземпляр Fx.Slide за замовчуванням для елемента. Отримує попередньо встановлений екземпляр Fx.Slide або новий з опціями за замовчуванням.

Синтаксис:

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

Аргументи:

1. options - (object) опції Fx.Morph.

Повертає:

• (element) цей елемент

Приклад:

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

Синтаксис:

el.get('slide');

Аргументи:

1. options - (object, опціонально) опції Fx.Slide. якщо передано, буде створено новий екземпляр.

Повертає:

• (object) екземпляр Fx.Slide

Приклади:

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

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

Native: Element

Користувацький нативний для дозволу використання всіх його методів з будь-яким DOM-елементом через функцію долара $.

Element Method: slide

Ковзає цей елемент у видимій зоні.

Синтаксис:

myElement.slide(how);

Аргументи:

1. how - (string, опціонально) Може бути 'in', 'out', 'toggle', 'show' та 'hide'. За замовчуванням 'toggle'.

Повертає:

• (element) цей елемент.

Приклади:

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