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
- Выполняет анимацию появления элементов выборки с учётом указанного объекта опций (параметров анимации).
Примеры
- <html>
- <head>
- <title>Анимация в jQuery</title>
- <script type="text/javascript" src="js/jquery.js"></script>
- </head>
- <body>
- <button>Кнопка</button>
- <div style="width: 200px; height: 200px; min-height: 50px; background: coral; display: none"></div>
- </body>
- </html>
- <script>
- $('button').on('click', function() {
- $('div')
- .slideDown(1000, 'linear', function() {
- alert('Анимация завершена');
- });
- });
- </script>
Высота элемента во время анимации начнёт увеличиваться только от 50px (значение свойства min-height
). Если после появления элемента нажать на кнопку ещё раз, тогда функция complete
запустится без выдержки времени.