.slideDown( [ продолжительность ], [ вызов ] )
Возвращает: jQuery
Описание: Показывает соответствующие элементы с эффектом скольжения.
.slideDown( [ продолжительность ], [ вызов ] )
Добавлена в версию: 1.0
Строка или число, определяющие, как долго анимация будет работать.
вызов
Функция вызываемая после завершения анимации.
.slideDown( [ продолжительность ], [ ослабление ], [ вызов ] )
Добавлена в версию: 1.4.3
Строка или число, определяющие, как долго анимация будет работать.
ослабление
Строка, указывающая какая функция ослабления будет использоватся для перехода.
вызов
Функция вызываемая после завершения анимации.
Метод .slideDown() анимирует высоту соответсвующих элементов.
Это приводит к сползанию нижней части элемента вниз.
Длительность дается в милисекундах; более высокое число показывает более медленную анимацию, а не быструю. Выражения 'fast' и 'slow' соответствуют продолжительности в 200 и 600 милисекунд, соответственно. Если другие выражения представленны или если параметр продолжительность опущен, используется продолжительность по умолчанию в 400 милисекунд.
Если указанна, функция обратного вызова, то она вызывается после завершения анимации. Это может быть полезно для нанизывания различных анимаций вместе в определенной последовательности. В функцию обратного вызова не передается никаких аргументов, но this является элементом DOM, который анимируется. Если многочисленные элементы анимируются, важно отметить, что функция обратного вызова вызывается единожды для каждого соответствующего элемента, а не один раз в целом на анимацию.
Мы можем анимировать любой элемент, например, простое изображение:
<div id="clickme"> Click here </div> <img id="book" src="book.png" alt="" width="100" height="123" />
Если элемент изначально скрыт, мы можем медленно его показать:
$('#clickme').click(function() {
$('#book').slideDown('slow', function() {
// Animation complete.
});
});
Дополнительные примечания:
- Все эффекты jQuery, включая
.slideDown(), могут быть выключенны глобально с помощью установкиjQuery.fx.off = true. Для подробной информации, смотрите jQuery.fx.off.
Примеры
Пример 1
Раскрывает все элементы div используя эффект «скольжения» вниз, длительность анимационных эффектов — 600 миллисекунд.Пример 1 - Полный код:
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript" language="javascript"> $(document).ready(function(){ $(document.body).click(function () { if ($("div:first").is(":hidden")) { $("div").slideDown("slow"); } else { $("div").hide(); } }); }); </script> <style> div { background:#de9a44; margin:3px; width:80px; height:40px; display:none; float:left; } </style> </head> <body> Click me! <div></div> <div></div> <div></div> </body> </html>
Пример 2
Раскрывает все элементы input используя данный эффект «скольжения» вниз. Время анимации составляет 1000 мс. Когда анимация выполнена, вызывается функция, которая изменяет внешний вид элементов input, особенно среднего элемента, которому передается фокус.Пример 2 - Полный код:
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript" language="javascript"> $(document).ready(function(){ $("div").click(function () { $(this).css({ borderStyle:"inset", cursor:"wait" }); $("input").slideDown(1000,function(){ $(this).css("border", "2px red inset") .filter(".middle") .css("background", "yellow") .focus(); $("div").css("visibility", "hidden"); }); }); }); </script> <style> div { background:#cfd; margin:3px; width:50px; text-align:center; float:left; cursor:pointer; border:2px outset black; font-weight:bolder; } input { display:none; width:120px; float:left; margin:10px; } </style> </head> <body> <div>Push!</div> <input type="text" /> <input type="text" class="middle" /> <input type="text" /> </body> </html>
Была ли эта информация полезной?
