.hide()

.hide()Возвращает: jQuery

Описание: Скрыть совпавшие элементы.

версия добавлена: 1.0.hide()
- Эта сигнатура не принимает аргументов.
версия добавлена: 1.0.hide( [duration ] [, complete ] )
- duration (по умолчанию: 400)
  
  Тип: Число или Строка
  
  Строка или число, определяющие продолжительность анимации.
- complete
  
  Тип: Функция()
  
  Функция, вызываемая по завершении анимации, вызывается один раз на совпавший элемент.
версия добавлена: 1.0.hide( options )
- options
  
  Тип: Объект
  
  Словарь дополнительных параметров для передачи методу.
  - duration (по умолчанию: 400)
    
    Тип: Число или Строка
    
    Строка или число, определяющие продолжительность анимации.
  - easing (по умолчанию: swing)
    
    Тип: Строка
    
    Строка, указывающая, какую функцию плавного перехода использовать для перехода.
  - queue (по умолчанию: true)
    
    Тип: Булево значение или Строка
    
    Булево значение, указывающее, следует ли поместить анимацию в очередь эффектов. Если false, анимация начнется немедленно. Начиная с jQuery 1.7, параметр queue также может принимать строку, в этом случае анимация добавляется в очередь, представленную этой строкой. При использовании пользовательского имени очереди анимация не запускается автоматически; необходимо вызвать .dequeue("queuename") для ее запуска.
  - specialEasing
    
    Тип: Объект
    
    Объект, содержащий одну или несколько свойств CSS, определённых в параметре properties, и соответствующие функции плавного перехода. (версия добавлена: 1.4)
  - step
    
    Тип: Функция( Число now, Tween tween )
    
    Функция, которая вызывается для каждого анимируемого свойства каждого анимируемого элемента. Эта функция предоставляет возможность изменить объект Tween, чтобы изменить значение свойства перед его установкой.
  - progress
    
    Тип: Функция( Promise animation, Число progress, Число remainingMs )
    
    Функция, которая вызывается после каждого шага анимации, только один раз на анимированный элемент независимо от количества анимированных свойств. (версия добавлена: 1.8)
  - complete
    
    Тип: Функция()
    
    Функция, которая вызывается, когда анимация элемента завершается.
  - start
    
    Тип: Функция( Promise animation )
    
    Функция, вызываемая при начале анимации элемента. (версия добавлена: 1.8)
  - done
    
    Тип: Функция( Promise animation, Булево значение jumpedToEnd )
    
    Функция, вызываемая при завершении анимации элемента (объект Promise объекта разрешается). (версия добавлена: 1.8)
  - fail
    
    Тип: Функция( Promise animation, Булево значение jumpedToEnd )
    
    Функция, вызываемая при отказе от завершения анимации элемента (объект Promise объекта отклоняется). (версия добавлена: 1.8)
  - always
    
    Тип: Функция( Promise animation, Булево значение jumpedToEnd )
    
    Функция, которая вызывается при завершении или остановке анимации элемента без завершения (объект Promise либо разрешается, либо отклоняется). (версия добавлена: 1.8)
версия добавлена: 1.4.3.hide( duration [, easing ] [, complete ] )
- duration (по умолчанию: 400)
  
  Тип: Число или Строка
  
  Строка или число, определяющие продолжительность анимации.
- easing (по умолчанию: swing)
  
  Тип: Строка
  
  Строка, указывающая, какую функцию плавного перехода использовать для перехода.
- complete
  
  Тип: Функция()
  
  Функция, вызываемая по завершении анимации, вызывается один раз на совпавший элемент.

Без параметров, метод .hide() является простейшим способом скрытия элемента:

$( ".target" ).hide();

Совпавшие элементы будут скрыты немедленно, без анимации. Это примерно эквивалентно вызову .css( "display", "none" ), за исключением того, что значение свойства display сохраняется в кэше данных jQuery, чтобы display можно было позже восстановить до первоначального значения. Если у элемента значение display равно inline и он скрыт, а затем показан, он снова будет отображён inline.

Когда заданы duration, объект или функция «complete», .hide() становится методом анимации. Метод .hide() анимирует ширину, высоту и непрозрачность совпавших элементов одновременно. Когда эти свойства достигают 0, свойство стиля display устанавливается в none для того, чтобы элемент больше не влиял на макет страницы.

Продолжительности задаются в миллисекундах; большие значения указывают на более медленные анимации, а не более быстрые. Строки 'fast' и 'slow' могут быть предоставлены для указания продолжительности 200 и 600 миллисекунд соответственно.

Обратите внимание, что .hide() вызывается немедленно и переопределит очередь анимации, если не указана продолжительность или продолжительность равна 0.

Начиная с jQuery 1.4.3, можно использовать необязательную строку, обозначающую функцию плавного перехода. Функции плавного перехода определяют скорость анимации в различные моменты анимации. Единственные реализации плавного перехода в библиотеке jQuery — это значение по умолчанию, называемое swing, и значение, которое движется с постоянной скоростью, называемое linear. Больше функций плавного перехода доступны с использованием плагинов, в частности, набора jQuery UI.

Если она указана, обратный вызов вызывается после завершения анимации. Это может быть полезно для связывания различных анимаций в последовательности. Обратный вызов не получает аргументов, но this устанавливается в DOM-элемент, который анимируется. Если анимируются несколько элементов, важно отметить, что обратный вызов выполняется один раз на каждый совпавший элемент, а не один раз для всей анимации.

Примечание: Этот метод может вызывать проблемы с производительностью, особенно при использовании на многих элементах. Если вы сталкиваетесь с такими проблемами, используйте инструменты для тестирования производительности, чтобы определить, вызван ли этот метод ими. Кроме того, этот метод может вызывать проблемы с адаптивными макетами, если значение display отличается при различных размерах области просмотра.

Мы можем анимировать любой элемент, например, простое изображение:

<div id="clickme">
  Click here
</div>
<img id="book" src="book.png" alt="" width="100" height="123">

// With the element initially shown, we can hide it slowly:
$( "#clickme" ).on( "click", function() {
  $( "#book" ).hide( "slow", function() {
    alert( "Animation complete." );
  });
});

Рисунок 1 — Иллюстрация эффекта `hide()`

Дополнительные заметки:

Все эффекты jQuery, включая .hide(), могут быть отключены глобально, установив jQuery.fx.off = true, что эффективно устанавливает продолжительность в 0. Для получения дополнительной информации см. jQuery.fx.off.

Примеры:

Скрывает все абзацы, затем ссылку по нажатию.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>hide demo</title>
  <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
 
<p>Hello</p>
<a href="#">Click to hide me too</a>
<p>Here is another paragraph</p>
 
<script>
$( "p" ).hide();
$( "a" ).on( "click", function( event ) {
  event.preventDefault();
  $( this ).hide();
});
</script>
 
</body>
</html>

Демо:

Анимирует все показанные абзацы для скрытия медленно, завершая анимацию в течение 600 миллисекунд.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>hide demo</title>
  <style>
  p {
    background: #dad;
    font-weight: bold;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
 
<button>Hide 'em</button>
<p>Hiya</p>
<p>Such interesting text, eh?</p>
 
<script>
$( "button" ).on( "click", function() {
  $( "p" ).hide( "slow" );
});
</script>
 
</body>
</html>

Демо:

Анимирует все спаны (слова в данном случае) для быстрого скрытия, завершая каждую анимацию в течение 200 миллисекунд. После завершения каждой анимации запускается следующая.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>hide demo</title>
  <style>
  span {
    background: #def3ca;
    padding: 3px;
    float: left;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
 
<button id="hider">Hide</button>
<button id="shower">Show</button>
<div>
  <span>Once</span> <span>upon</span> <span>a</span>
  <span>time</span> <span>there</span> <span>were</span>
  <span>three</span> <span>programmers...</span>
</div>
 
<script>
$( "#hider" ).on( "click", function() {
  $( "span:last-child" ).hide( "fast", function() {
    // Use arguments.callee so we don't need a named function
    $( this ).prev().hide( "fast", arguments.callee );
  });
});
$( "#shower" ).on( "click", function() {
  $( "span" ).show( 2000 );
});
</script>
 
</body>
</html>

Демо:

Скрывает div при нажатии более чем за 2 секунды, затем удаляет div-элемент, когда он скрыт. Попробуйте нажать на несколько блоков одновременно.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>hide demo</title>
  <style>
  div {
    background: #ece023;
    width: 30px;
    height: 40px;
    margin: 2px;
    float: left;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
 
<div></div>
 
<script>
for ( var i = 0; i < 5; i++ ) {
  $( "<div>" ).appendTo( document.body );
}
$( "div" ).on( "click", function() {
  $( this ).hide( 2000, function() {
    $( this ).remove();
  });
});
</script>
 
</body>
</html>

.hide()Возвращает: jQuery

версия добавлена: 1.0.hide()

версия добавлена: 1.0.hide( [duration ] [, complete ] )

версия добавлена: 1.0.hide( options )

версия добавлена: 1.4.3.hide( duration [, easing ] [, complete ] )

Дополнительные заметки:

Примеры:

Демо:

Демо:

Демо:

Демо: