slideDown()

Метод 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 запустится без выдержки времени.