Поочередное разворачивание и сворачивание элементов
- Автор SeRbGa
jQuery имеет ряд функций, выполняющих анимационные эффекты с элементами страницы. Начиная от простых возможностей: скрытия, появления, перемещения элементов, библиотека позволит создавать свои, более сложные эффекты, основанные на изменении CSS свойств. Эти изменения могут происходить плавно или мгновенно, замедляться, ускоряться или выполняться равномерно.
.slideToggle()
Вызов этого метода приводит к плавному сворачиванию (если элемент развернут) или разворачиванию (если элемент свернут) выбранных элементов на странице. Отметим, что после скрытия элемента, его css-свойство display становится равным none, а перед появлением, оно получает свое прежнее значение обратно. Метод имеет два варианта использования:
.slideToggle([duration],[callback]):jQueryv:1.0
duration — продолжительность выполнения анимации (появления или скрытия). Может быть задана в миллисекундах или строковым значением 'fast' или 'slow' (200 и 600 миллисекунд). По умолчанию, анимация будет происходить за 400 миллисекунд.
callback — функция, заданная в качестве обработчика завершения анимации (появления или скрытия). Ей не передается никаких параметров, однако, внутри функции, переменная this будет содержать DOM-объект анимируемого элемента. Если таких элементов несколько, то обработчик будет вызван отдельно, для каждого элемента.
.slideToggle([duration],[easing],[callback])
:jQueryv:1.4.3
duration — см. выше.
easing — изменение скорости анимации (будет ли она замедляется к концу выполнения или наоборот ускорится).
callback — см. выше.
Примеры использования:
| $("#leftFit").slideToggle() | свернет/развернет элемент с идентификатором leftFit за 400 мс. |
| $("#leftFit").slideToggle(300) | в течении 1/3 секунды свернет/развернет элемент с идентификатором leftFit. |
| $("#leftFit").slideToggle("slow") | в течении 600 мс свернет/развернет элемент с идентификатором leftFit. |
Можно скрывать и показывать элементы с помощью изменения размеров и прозрачности, с помощью функций show(), hide().
Если вы хотите только развернуть или только свернуть элементы, воспользуйтесь методами .slideDown(), .slideUp()
