slideDown()

36
посл. ред. 26.10.2016

Метод slideDown() показывает на странице все элементы текущей выборки. Анимация появления элементов происходит за счёт плавного увеличения высоты элементов (height) с 0 (или от значения, установленного свойством min-height) до исходного значения.

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

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

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

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

Примеры

  1. <html>
  2. <head>
  3.   <title>Анимация в jQuery</title>
  4.   <script type="text/javascript" src="js/jquery.js"></script>
  5. </head>
  6. <body>
  7.   <button>Кнопка</button>
  8.   <div style="width: 200px; height: 200px; min-height: 50px; background: coral; display: none"></div>
  9. </body>
  10. </html>
  11.  
  12. <script>
  13. $('button').on('click', function() {
  14.   $('div')
  15.   .slideDown(1000, 'linear', function() {
  16.     alert('Анимация завершена');
  17.   });
  18. });
  19. </script>

Высота элемента во время анимации начнёт увеличиваться только от 50px (значение свойства min-height). Если после появления элемента нажать на кнопку ещё раз, тогда функция complete запустится без выдержки времени.