show()

посл. ред. 26.10.2016

Метод show() показывает на странице все элементы текущей выборки. Если метод вызывается без аргументов, тогда элементы показываются мгновенно. Если при вызове метода show() указывается хотя бы один аргумент, тогда выполняется анимация появления элементов. При этом одновременно происходит плавное увеличение размеров (width, height, margin и padding) элементов от 0 до исходных и уменьшение прозрачности (opacity) с 100% до 0.

Если элемент был скрыт средствами jQuery, тогда после отображения с помощью метода show() свойство display получит прежнее значение.

Параметры анимации задаются в виде объекта. Параметры duration, easing и complete можно задать отдельными аргументами.

Варианты использования

jQ_object.show() => jQuery: Мгновенно показывает все элементы выборки.
jQ_object.show([duration][, easing][, complete]) => jQuery: Выполняет анимацию появления элементов выборки увеличением размеров с 0 до исходных и уменьшением прозрачности с 100% до 0.
jQ_object.show(опции) => jQuery: Выполняет анимацию появления элементов выборки с учётом указанного объекта опций (параметров анимации).

Примеры

<html>
<head>
  <title>Анимация в jQuery</title>
  <script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
  <button>Кнопка</button>
  <div style="width: 200px; height: 200px; background: coral; display: none"></div>
</body>
</html>
 
<script>
$('button').on('click', function() {
  $('div')
  .show({
    duration: 3000,
    specialEasing: {
      height: 'linear',
      width: 'swing'
    },
    progress: function(animation, progress, remainingMs) {
      $(this).text(remainingMs);
    },
    complete: function() {
      alert('Анимация завершена');
    }
  });
});
</script>

Если после появления элемента нажать на кнопку ещё раз, тогда функция complete запустится без выдержки времени.