Функции .hide и .show библиотеки jQuery

Две функции-близнеца, предназначенные для управления видимостью элементов на странице. Это осуществляется через CSS-свойство display (замечание: по внимательном перечтении оказалось не все так просто - в этой “магии” задействованы не только CSS-свойство display, но также width, height, opacity; и даже margin и padding!).

После скрытия элемента значение его CSS-свойство становится равным dispaly: none. Перед появлением элемента его CSS-свойство display изменяет свое значение на противоположное от none.

duration — продолжительность выполнения анимации (появления или скрытия). Может быть задана в миллисекундах или строковым значением ‘fast’ или ‘slow’ (200 и 600 миллисекунд). Если этот параметр не задан, анимация будет происходить мгновенно, элемент просто появится/исчезнет.

callback — функция, заданная в качестве обработчика завершения анимации (появления или скрытия).

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

• мгновенно скроет элемент с идентификатором #leftFit.

$("#leftFit").hide();

• мгновенно покажет элемент с идентификатором #leftFit:

$("#leftFit").show();

• в течении 1/3 секунды скроет элемент с идентификатором #leftFit:

$("#leftFit").hide(300);

• в течении 600 миллисекунд вернет видимость элементу с идентификатором #leftFit:

$("#leftFit").show("slow")

Можно скрывать и показывать элементы с помощью сворачивания/разворачивания (за счет изменения высоты). Это делают функции slideUp(), slideDown().

Медленно скрывает и раскрывает все видимые параграфы, длительность анимационных эффектов — 600 миллисекунд:

$('button').click(function () {
  $('p').hide('slow');
});

$('button').click(function() {
  $('p').show('slow');
});

Использование callback-функции:

$('#clickme').click(function() {
  $('#book').hide('slow', function() {
    alert('Animation complete.');
  });
});

$('#clickme').click(function() {
  $('#book').show('slow', function() {
    alert('Animation complete.');
  });
});

Материал данной статьи основан на ресурсах:

• http://jquery.page2page.ru
• http://jquery-docs.ru
• http://api.jquery.com

… и не претендует на оригинальность.