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

Reading time ~2 minutes

Две функции-близнеца, предназначенные для управления видимостью элементов на странице. Это осуществляется через CSS-свойство

1
display
(замечание: по внимательном перечтении оказалось не все так просто - в этой “магии” задействованы не только CSS-свойство
1
display
, но также
1
width
,
1
height
,
1
opacity
; и даже
1
margin
и
1
padding
!).

После скрытия элемента значение его CSS-свойство становится равным

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

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

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

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

  • мгновенно скроет элемент с идентификатором
    1
    
    #leftFit
    
    .
$("#leftFit").hide();
  • мгновенно покажет элемент с идентификатором
    1
    
    #leftFit
    
    :
$("#leftFit").show();
  • в течении 1/3 секунды скроет элемент с идентификатором
    1
    
    #leftFit
    
    :
$("#leftFit").hide(300);
  • в течении 600 миллисекунд вернет видимость элементу с идентификатором
    1
    
    #leftFit
    
    :
$("#leftFit").show("slow")

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

1
slideUp()
,
1
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.');
  });
});

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

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


Mangling Angular

Angular Builder поддерживает параметры среды:- NG_BUILD_MANGLE- NG_BUILD_MINIFY- NG_BUILD_BEAUTIFYМожно установить их при запуске скрипта...… Continue reading

Constructor parameter without access modifier

Published on February 04, 2024

RxJs and DestroyRef Provider

Published on January 24, 2024