jQuery метод .slideToggle()

Определение и применение

jQuery метод .slideToggle() позволяет плавно отобразить или скрыть выбранные элементы скользящим движением. Если элемент изначально отображается, то он будет скрыт, если элемент скрыт, то он будет отображен.

Значение CSS свойства display элемента сохраняются и восстанавливаются при необходимости. Например, если элемент имеет значение этого свойства inline, то при отображении элемента, после того как он был скрыт, значение свойства не изменится и будет по прежнему inline.

jQuery синтаксис:

Синтаксис 1.0:

$( selector ).slideToggle() // метод используется без параметров

$( selector ).slideToggle( duration, complete )

duration - Number, или String

complete - Function

$( selector ).slideToggle( { options } ) // option: value (описание ниже)

options - PlainObject

Синтаксис 1.4.3:

$( selector ).slideToggle( duration, easing, complete )

duration - Number, или String

easing - String

complete - Function

Добавлен в версии jQuery

Значения параметров

Пример использования

<button class="toggle">Метод .toggle()</button><button class="slide-toggle">Метод .slideToggle()</button>
<hr />
<div></div>
<div></div>
<div></div>

$(document).ready(function () {
    $('.toggle').click(function () {
        $('div').toggle()
    })
    $('.slide-toggle').click(function () {
        $('div').slideToggle()
    })
})

div {
    display: inline-block;
    width: 75px;
    height: 150px;
    margin-right: 20px;
    background-color: green;
}

В этом примере с использованием jQuery метода .toggle() мы при нажатии на определенную кнопку скрываем, или отображаем выбранные элементы <div> в документе, а и с использованием метода .slideToggle() делаем аналогочиные действия, но при этом высота элемента изменяется плавно - скользящим движением (анимация изменения высоты).

Рассмотрим следующий пример в котором зададим методам .toggle() и .slideToggle() различные значения продолжительности анимации:

<button class="toggle">Метод .toggle()</button><button class="slide-toggle">Метод .slideToggle()</button>
<hr />
<div></div>
<div></div>
<div></div>

$(document).ready(function () {
    $('.toggle').click(function () {
        $('div:first').toggle('slow')
        $('div:nth-of-type(2)').toggle(1000)
        $('div:last').toggle('fast')
    })
    $('.slide-toggle').click(function () {
        $('div:first').slideToggle('slow')
        $('div:nth-of-type(2)').slideToggle(1000)
        $('div:last').slideToggle('fast')
    })
})

div {
    display: inline-block;
    width: 75px;
    height: 150px;
    margin-right: 20px;
    background-color: plum;
}

В этом примере с использованием jQuery методов .toggle() и .slideToggle() мы при нажатии на определенную кнопку скрываем, либо отображаем все элементы <div> в документе. При этом первый элемент <div> скрывается, или отображается за 600 миллисекунд (ключевое слово 'slow'), второй элемент за 1000 миллисекунд, а третитй за 200 миллисекунд (ключевое слово 'fast'). Обратите внимание на разницу в анимации, метод .slideToggle() анимирует только высоту элемента, а метод .toggle() ширину, высоту и прозрачность.

Рассмотрим следующий пример в котором зададим методам .toggle() и .slideToggle() не только продолжительность анимации, но и укажем скорость анимации и функцию, которая будет выполнена после завершения анимации:

<button class="toggle">Метод .toggle()</button><button class="slide-toggle">Метод .slideToggle()</button>
<hr />
<div></div>
<div></div>
<div></div>

$(document).ready(function () {
    $('.toggle').click(function () {
        $('div').toggle(500, 'linear', function () {
            console.log('toggle completed')
        })
    })
    $('.slide-toggle').click(function () {
        $('div').slideToggle(500, 'linear', function () {
            console.log('slideToggle completed')
        })
    })
})

div {
    display: inline-block;
    width: 75px;
    height: 150px;
    margin-right: 20px;
    background-color: red;
}

В этом примере с использованием jQuery методов .toggle() и .slideToggle() мы при нажатии на определенную кнопку скрываем, либо отображаем все элементы <div> в документе. При этом мы указали для наших методов продолжительность анимации равную пол секунды (500 миллисекунд), эффект анимации происходит с одинаковой скоростью от начала до конца (linear) и функцию, которая после завершения анимации выводит в консоль браузера информацию о завершении выполнения метода для каждого элемента в наборе совпавших элементов.

Рассмотрим следующий пример в котором передадим в качестве параметра методов .toggle() и .slideToggle() объект, содержащий различные опции, которые будут контролировать анимацию:

<button class="toggle">Метод .toggle()</button><button class="slide-toggle">Метод .slideToggle()</button>
<hr />
<div></div>
<div></div>
<div></div>

$(document).ready(function () {
    $('.toggle').click(function () {
        // задаем функцию при нажатиии на элемент с классом hide
        $('div').toggle({
            // плавно скрывыаем элементы <div> в документе
            duration: 800, // продолжительность анимации
            easing: 'linear', // скорость анимации
            complete: function () {
                // callback
                console.log('toggle completed')
            },
            queue: false, // не ставим в очередь
        })
    })
    $('.slide-toggle').click(function () {
        // задаем функцию при нажатиии на элемент с классом show
        $('div').slideToggle({
            // плавно отображаем элементы <div> в документе
            duration: 800, // продолжительность анимации
            easing: 'linear', // скорость анимации
            complete: function () {
                // callback
                console.log('slideToggle completed')
            },
            queue: false, // не ставим в очередь
        })
    })
})

div {
    display: inline-block;
    width: 75px;
    height: 150px;
    margin-right: 20px;
    background-color: orangered;
}

В этом примере с использованием jQuery методов .toggle() и .slideToggle() мы при нажатии на определенную кнопку скрываем, либо отображаем все элементы <div> в документе. При этом мы в качестве параметров методов передаем объект содержащий следующие параметры:

• продолжительность анимации равную 800 миллисекунд (duration: 800)
• эффект анимации происходит с одинаковой скоростью от начала до конца (easing: linear)
• функция, которая после завершения анимации выводит в консоль браузера информацию о завершении выполнения метода для каждого элемента в наборе совпавших элементов (complete: function).
• анимация не размещается в очереди эффектов (queue: false).