jQuery метод .show()

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

jQuery метод .show() позволяет отобразить скрытые выбранные элементы. Для того, чтобы скрыть выбранные элементы вы можете воспользоваться методом .hide().

jQuery синтаксис:

Синтаксис 1.0:

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

$( selector ).show( duration, complete )

duration - Number, или String

complete - Function

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

options - PlainObject

Синтаксис 1.4.3:

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

duration - Number, или String

easing - String

complete - Function

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

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

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

<button class="hide">Скрыть</button><button class="show">Показать</button>
<p>Первый абзац</p>
<p>Второй абзац</p>
<p>Третий абзац</p>

$(document).ready(function () {
    $('.hide').click(function () {
        $('p').hide()
    })
    $('.show').click(function () {
        $('p').show()
    })
})

В этом примере с использованием jQuery методов .hide() и .show() мы при нажатии на определенную кнопку скрываем, либо отображаем все элементы <p> в документе.

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

<button class="hide">Скрыть</button><button class="show">Показать</button>
<p>Первый абзац</p>
<p>Второй абзац</p>
<p>Третий абзац</p>

$(document).ready(function () {
    $('.hide').click(function () {
        $('p:first').hide('slow')
        $('p:nth-of-type(2)').hide(2000)
        $('p:last').hide('fast')
    })
    $('.show').click(function () {
        $('p:first').show('slow')
        $('p:nth-of-type(2)').show(2000)
        $('p:last').show('fast')
    })
})

В этом примере с использованием jQuery методов .hide() и .show() мы при нажатии на определенную кнопку скрываем, либо отображаем все элементы <p> в документе. При этом первый элемент <p> скрывается, или отображается за 600 миллисекунд (ключевое слово 'slow'), второй элемент за 2000 миллисекунд, а третитй за 200 миллисекунд (ключевое слово 'fast').

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

<button class="hide">Скрыть</button><button class="show">Показать</button>
<p>Первый абзац</p>
<p>Второй абзац</p>
<p>Третий абзац</p>
<div class="status"></div>

$(document).ready(function () {
    $('.hide').click(function () {
        $('p').hide(500, 'linear', function () {
            $('.status').text('Элементы исчезли')
        })
    })
    $('.show').click(function () {
        $('p').show(500, 'linear', function () {
            $('.status').text('Элементы появились')
        })
    })
})

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

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

<button class="hide">Скрыть</button><button class="show">Показать</button>
<p>Первый абзац</p>
<p>Второй абзац</p>
<p>Третий абзац</p>
<div class="status"></div>

$(document).ready(function () {
    $('.hide').click(function () {
        $('p').hide({
            duration: 800,
            easing: 'linear',
            complete: function () {
                $('.status').text('Элементы исчезли')
            },
            queue: false,
        })
    })
    $('.show').click(function () {
        $('p').show({
            duration: 800,
            easing: 'linear',
            complete: function () {
                $('.status').text('Элементы появились')
            },
            queue: false,
        })
    })
})

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

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