.slideUp( [ продолжительность ], [ вызов ] )
Возвращает: jQuery
Описание: Скрывает соответствующие элементы с эффектом скольжения.
.slideUp( [ продолжительность ], [ вызов ] )
Добавлена в версию: 1.0
Строка или число, определяющие, как долго анимация будет работать.
вызов
Функция вызываемая после завершения анимации.
.slideUp( [ продолжительность ], [ ослабление ], [ вызов ] )
Добавлена в версию: 1.4.3
Строка или число, определяющие, как долго анимация будет работать.
ослабление
Строка, указывающая какая функция ослабления будет использоватся для перехода.
вызов
Функция вызываемая после завершения анимации.
Метод .slideUp() анимирует высоту соответсвующих элементов. Это приводит к поднятию нижней части элемента вверх до полного скрытия элемента. Когда высота достигает 0, свойство стиля display устанавливается в none для того, чтобы элемент больше не влиял на верстку страницы..
Длительность дается в милисекундах; более высокое число показывает более медленную анимацию, а не быструю. Выражения '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').slideUp('slow', function() {
// Animation complete.
});
});
Дополнительные примечания:
- Все эффекты jQuery, включая
.slideUp(), могут быть выключенны глобально с помощью установкиjQuery.fx.off = true. Для подробной информации, смотрите jQuery.fx.off.
Примеры
Пример 1
Скрывает все элементы div используя эффект “скольжения” вверх, длительность анимационных эффектов — 400 миллисекунд.Пример 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").show("slow"); } else { $("div").slideUp(); } }); }); </script> <style> div { background:#3d9a44; margin:3px; width:80px; height:40px; float:left; } </style> </head> <body> Click me! <div></div> <div></div> <div></div> <div></div> <div></div> </body> </html>
Пример 2
Скрывает все элементы input, используя данный эффект “скольжения” вверх. Время анимации составляет 200 мс. Когда анимация выполнена, отображается соответствующее сообщение.Пример 2 - Полный код:
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(document).ready(function(){ $("button").click(function () { $(this).parent().slideUp("slow", function () { $("#msg").text($("button", this).text() + " has completed."); }); }); }); </script> <style> div { margin:2px; } </style> </head> <body> <div> <button>Hide One</button> <input type="text" value="One" /> </div> <div> <button>Hide Two</button> <input type="text" value="Two" /> </div> <div> <button>Hide Three</button> <input type="text" value="Three" /> </div> <div id="msg"></div> </body> </html>
Была ли эта информация полезной?
