.show()

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

Описание: Отобразить выбранные элементы.

версия добавлена: 1.0.show()
- Эта подпись не принимает никаких аргументов.
версия добавлена: 1.0.show( [duration ] [, complete ] )
- duration (по умолчанию: 400)
  
  Тип: Число или Строка
  
  Строка или число, определяющее, как долго будет выполняться анимация.
- complete
  
  Тип: Функция()
  
  Функция, вызываемая после завершения анимации, вызывается один раз на каждый сопоставленный элемент.
версия добавлена: 1.0.show( 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.show( duration [, easing ] [, complete ] )
- duration (по умолчанию: 400)
  
  Тип: Число или Строка
  
  Строка или число, определяющее, как долго будет выполняться анимация.
- easing (по умолчанию: swing)
  
  Тип: Строка
  
  Строка, указывающая, какую функцию плавного изменения использовать для перехода.
- complete
  
  Тип: Функция()
  
  Функция, вызываемая после завершения анимации, вызывается один раз на каждый сопоставленный элемент.

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

$( ".target" ).show();

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

Примечание: Если вы используете !important в ваших стилях, например display: none !important, .show() не переопределит !important. Рекомендуется использовать разные классы с .addClass(), .removeClass() или .toggleClass(). Другой подход - использование .attr( "style", "display: block !important;" ); однако будьте осторожны, так как он перезаписывает атрибут style элемента.

Когда заданы duration, объект или функция "complete", .show() становится методом анимации. Метод .show() анимирует ширину, высоту и непрозрачность выбранных элементов одновременно.

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

Начиная с 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 hidden, we can show it slowly:
$( "#clickme" ).on( "click", function() {
  $( "#book" ).show( "slow", function() {
    // Animation complete.
  });
});

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

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

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

Примеры:

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

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>show demo</title>
  <style>
  p {
    background: yellow;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
 
<button>Show it</button>
<p style="display: none">Hello  2</p>
 
<script>
$( "button" ).on( "click", function() {
  $( "p" ).show( "slow" );
});
</script>
 
</body>
</html>

Демо:

Отображает первый div, а затем каждый следующий смежный div в порядке, с анимацией 200 мс. Каждая анимация начинается, когда предыдущий смежный div заканчивает свою анимацию.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>show demo</title>
  <style>
  div {
    background: #def3ca;
    margin: 3px;
    width: 80px;
    display: none;
    float: left;
    text-align: center;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
 
<button id="showr">Show</button>
<button id="hidr">Hide</button>
<div>Hello 3,</div>
<div>how</div>
<div>are</div>
<div>you?</div>
 
<script>
$( "#showr" ).on( "click", function() {
  $( "div" ).first().show( "fast", function showNext() {
    $( this ).next( "div" ).show( "fast", showNext );
  });
});
 
$( "#hidr" ).on( "click", function() {
  $( "div" ).hide( 1000 );
});
</script>
 
</body>
</html>

Демо:

Отображает все элементы span и input с анимацией. Изменяет текст после завершения анимации.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>show demo</title>
  <style>
  span {
    display: none;
  }
  div {
    display: none;
  }
  p {
    font-weight: bold;
    background-color: #fcd;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
</head>
<body>
 
<button>Do it!</button>
<span>Are you sure? (type 'yes' if you are) </span>
<div>
  <form>
    <input type="text"  value="as;ldkfjalsdf">
  </form>
</div>
<p style="display:none;">I'm hidden...</p>
 
<script>
function doIt() {
  $( "span,div" ).show( "slow" );
}
// Can pass in function name
$( "button" ).on( "click", doIt );
 
$( "form" ).on( "submit", function( event ) {
  if ( $( "input" ).val() === "yes" ) {
    $( "p" ).show( 4000, function() {
      $( this ).text( "Ok, DONE! (now showing)" );
    } );
  }
  $( "span,div" ).hide( "fast" );
 
  // Prevent form submission
  event.preventDefault();
} );
</script>
 
</body>
</html>

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

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

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

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

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

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

Примеры:

Демо:

Демо:

Демо: