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

Reading time ~1 minute

Две функции-близнеца, предназначенные для управления видимостью элементов на странице. Это осуществляется через 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.');
  });
});

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

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


Различие между exports и module.exports

Попытка разобраться, в чем различие между exports и module.exports, основанная на статье Understanding module.exports ...Continue reading

Комментарии

Защита от автоматических сообщений
CAPTCHA
Введите слово на картинке