Поочередное разворачивание и сворачивание элементов. Скрипт для сворачивания контента по клику

Вызов этого метода приводит к плавному сворачиванию (если элемент развернут) или разворачиванию (если элемент свернут) выбранных элементов на странице. Отметим, что после скрытия элемента, его css-свойство display становится равным none , а перед появлением, оно получает свое прежнее значение обратно. Метод имеет два варианта использования:

duration — продолжительность выполнения анимации (появления или скрытия). Может быть задана в миллисекундах или строковым значением "fast" или "slow" (200 и 600 миллисекунд). По умолчанию, анимация будет происходить за 400 миллисекунд.
callback — функция, заданная в качестве обработчика завершения анимации (появления или скрытия). Ей не передается никаких параметров, однако, внутри функции, переменная this будет содержать DOM-объект анимируемого элемента. Если таких элементов несколько, то обработчик будет вызван отдельно, для каждого элемента.

duration — см. выше.
easing — изменение скорости анимации (будет ли она замедляется к концу выполнения или наоборот ускорится). (см. описание)
callback — см. выше.

Примеры использования:

Можно скрывать и показывать элементы с помощью изменения размеров и прозрачности, с помощью функций show(), hide() .

Если вы хотите только развернуть или только свернуть элементы, воспользуйтесь методами .slideDown(), .slideUp()

В действии

При нажатии на кнопку элемент с картинкой и текстом будет поочередно сворачиваться и разворачиваться:

~lt~!DOCTYPE html~gt~ ~lt~html~gt~ ~lt~head~gt~ ~lt~script src="http://code.jquery.com/jquery-1.4.4.js"~gt~~lt~/script~gt~ ~lt~/head~gt~ ~lt~body~gt~ ~lt~button~gt~Вуаля!~lt~/button~gt~~lt~br~gt~~lt~br~gt~ ~lt~div~gt~ ~lt~img src="/tags/images/yo.jpg" style="height:150px; float:right; margin:5px 5px"~gt~ ~lt~b~gt~Правило.~lt~/b~gt~ Ё должна использоваться: в случаях возможных разночтений; в словарях; в книгах для изучающих русский язык (т. е. детей и иностранцев); для правильного прочтения редких топонимов, названий или фамилий. Во всех остальных случаях наличие буквы ё только затрудняет чтение. Она плохо выглядит, зато хорошо звучит. ~lt~/div~gt~ ~lt~script~gt~ $("button").click(function () { $("div").slideToggle("slow"); }); ~lt~/script~gt~ ~lt~/body~gt~ ~lt~/html~gt~

Библиотека jQuery предоставляет сразу три полезных метода слайдинга: slideUp , jQuery slideDown и slideToggle . Эти методы можно применять для отображения и скрытия элементов HTML DOM с помощью анимации.

jQuery slide

Мы рассмотрим различные методы реализации слайдеров в jQuery с примерами.

jQuery slideDown() : используется, чтобы показать скрытый элемент HTML , развертывая окно с контентом вниз;

jQuery slideUp() : применяется, чтобы скрыть элемент HTML , свертывая окно с контентом вверх;

jQuery slideToggle() : используется, чтобы поочередно сворачивать и разворачивать элемент HTML . Если элемент спрятан, его нужно развернуть методом slideDown() . Для видимых элементов, наоборот, применяется slideUp() .

jQuery slideDown

Метод jQuery slideDown() применяется, чтобы плавно развернуть элементы html . Атрибут height выбранного элемента анимирован, поэтому его нижняя часть будет плавно разворачиваться. Параметры метода slideDown() определяют то, как будет выполняться развертывание.

Варианты синтаксиса метода slideDown() :

slideDown (duration );

slideDown (duration, callBackfunction );

slideDown (speed, easing, callBackfunction );

slideDown (options ).

duration slow » (медленно ) и «fast

Функция callBackfunction : эта функция активизируется после завершения эффекта.

easing : данный параметр определяет, какая функция будет использована для анимации: «swing » или «linear ». Значением по умолчанию является «swing ».

Пример jQuery slideDown

В этом примере jQuery slideDown() реализации метод принимает два параметра: продолжительность (duration ) со значением «slow » и функция обратного вызова. Запустив эту программу, можно увидеть, как функция обратного вызова стартует после завершения эффекта.

jQuery-slideDown.html

jQuery Slide Down $(document).ready(function(){ $("#btn1").click(function(){ $(".divClass").slideDown("slow",function () { $("#textMsg").text("Slide Down completed."); }); });}); .divClass{ padding:5px; text-align:center; background-color:green; border:solid 1px;}.divClass{ padding:50px; display:none;} Click Me to slide downJournalDev

jQuery SlideDown

Вот как эффект развертывания выполняется в jQuery . Параметры этого метода похожи на jQuery hide() и show() . Ниже показан результат применения программы.

Посмотреть результат

jQuery slideUp

Методы jQuery slideUp и slideDown() применяются, чтобы плавно свернуть элементы html . Атрибут height выбранного элемента анимирован, поэтому он будет сворачиваться плавно, поднимая нижнюю часть.

Варианты синтаксиса метода slideUp():

slideUp (duration );

slideUp (duration,callBackfunction );

slideUp (speed,easing,callbackMethod );

slideUp (options ).

duration : продолжительность (duration ) задается в миллисекундах. Также можно задать строковые значения, такие как «slow » (медленно ) и «fast » (быстро ). По умолчанию длительность составляет 400 миллисекунд.

Функция callBackfunction : эта функция активизируется после завершения слайдинга.

easing : определяет, какая функция плавности будет использована для анимации: «swing » или «linear ». Значением по умолчанию — «swing ».

options : duration , callBackfunction , easing , special easing и т. д.

Пример jQuery slideUp

В этом примере (без jQuery slideDown ) метод slideUp() принимает два параметра: продолжительность (duration ) со значением «slow

jQuery-slideUp.html

jQuery Slide Up $(document).ready(function(){ $("#btn1").click(function(){ $(".divClass").slideUp("slow",function() { $("#textMsg").text("Slide Up completed."); }); }); }); Click Me to slide up
JournalDev

jQuery SlideUp

Вот как эффект jQuery slideUp slideDown() выполняется.

Посмотреть результат

jQuery slideToggle

Методы jQuery Toggle и slideDown используются, чтобы показать или скрыть элементы html . Атрибут height выбранного элемента анимирован, поэтому его нижняя часть будет плавно разворачиваться или сворачиваться. Метод slideToggle() сначала проверяет видимость выбранного элемента. Если элемент раскрыт, то будет применен метод slideUp() , если нет - slideDown() .

Варианты синтаксиса метода slideToggle() :

slideToggle (duration );

slideToggle (duration,callBackfunction );

slideToggle (speed,easing,callbackMethod );

slideToggle (options ).

Пример jQuery slideToggle

В данном примере slideToggle() принимает два параметра: продолжительность (duration ) со значением «slow » и функцию обратного вызова. Запустив эту программу, можно увидеть, как функция обратного вызова стартует после завершения эффекта.

jQuery-slideToggle.html

jQuery Slide Toggle $(document).ready(function(){ $("#btn1").click(function(){ $(".divClass").slideToggle("slow",function() { alert("Slide Toggle Method completed."); }); });}); .divClass{ margin-top:20px; padding:10px; text-align:center; background-color:green; border:solid 1px; height:200px; width: 300px;} Click Me to slide Toggle
JournalDev

jQuery SlideToggle

Так можно переключаться между методами jQuery slideUp slideDown , чтобы скрыть или показать элементы html .

Посмотреть результат

Перевод статьи “jQuery slideUp, slideDown, slideToggle ” был подготовлен дружной командой проекта

Сегодня мы научимся сворачивать контент по клику на заголовке (или кнопке). Создадим для этого простой JQuery скрипт.

Главный плюс нашего скрипта будет в том, что он универсален. Вставив его 1 раз в страницу, можно сколько угодно раз добавлять такие блоки, где нужно свернуть контент. И по клику на заголовке - будет сворачиваться нужный!

Для начала создадим html-разметку:

Чайники

Ничего особенного здесь нет. Родительский элемент - .block. Заголовок h1 с классом.extremum-click, по которому мы будем кликать и сам контент с классом.extremum-slide, который будет сворачиваться и разворачиваться.

Теперь зададим стили для лучшего визуального восприятия нашего примера:

.extremum-slide { border : 1px solid ; padding : 50px ; }

А теперь самое интересное - наш скрипт:

$(".extremum-click" ) .click (function () { $(this ) .siblings (".extremum-slide" ) .slideToggle ("slow" ) ; } ) ;

Вот и все - такой простой скрипт! Единственное условие - скрипт нужно вставлять в конце страницы. Не забываем, что это JQuery, а значит предварительно нужно подключить свежую библиотеку! Что указано в скрипте? По клику на элементе с классом.extremum-click нужно скрыть блок.extremum-slide, который находится на 1 уровне с.extremum-click (именно того, по которому совершен клик - это необходимо для возможности добавления нескольких блоков на 1 страницу). Скорость сворачивания/разворачивания - slow (600 мс). Можно поменять на fast (200 мс) или задать значение в миллисекундах. Пользуйтесь!

Весь код целиком:

.extremum-slide { border:1px solid; padding:50px; } Чайники Этот рассказ про то, как я однажды пошел в лес за грибами и нашел волшебный чайник. Чайники Этот рассказ про то, как я однажды пошел в лес за грибами и нашел волшебный чайник. Чайники Этот рассказ про то, как я однажды пошел в лес за грибами и нашел волшебный чайник. $(".extremum-click").click(function () { $(this).siblings(".extremum-slide").slideToggle("slow"); });

Вы можете создать специальные ссылки, с которыми Вы можете позволить пользователю разворачивать и сворачивать все переключатели в текущем разделе одним щелчком. Есть множество очень полезных вещей, которые Вы можете сделать с этой особенностью. Например, это позволяет Вам писать справку и для новичка, и для опытных пользователей, на той же странице. Вы можете потом создать ссылки Более подробно / Менее подробно в заголовке раздела для того, чтобы переключиться между этими двумя версиями. Вы можете также использовать это, чтобы создать кнопку Печать , которая предразвернет все переключатели в текущем разделе перед печатью.

Развернуть все:	Свернуть все:
javascript:HMToggleExpandAll(true)	javascript:HMToggleExpandAll(false)

Чтобы добавить ссылки Развернуть все / Свернуть все , Вы должны вставить необходимый код вручную в шаблон HTML для ваших страниц. Вы будете нуждаться в небольшом количестве опыта в редактировании HTML для этого. См. шаблоны страницы раздела в главе Использование шаблонов HTML для детальных инструкций о том, как добавить код к вашим шаблонам страницы раздела.

Развернуть все:	Свернуть все:
Развернуть все	Свернуть все

Переменная в шаблоне HTML вставляет содержимое вашего раздела из редактора в шаблон. Это означает, что все вставленное непосредственно выше этой переменной вставлено непосредственно перед началом вашего нормального содержимого раздела, все непосредственно ниже нее вставлено непосредственно в конце содержимого вашего раздела.

Заголовок раздела находится в коде между тэгами и . Компоненты заголовка находятся в таблице. Вы, возможно, должны добавить ячейки или строки, чтобы достигнуть эффекта размещения, которого Вы хотите.

Условное выражение Развернуть все / Свернуть все в разделах, содержащих переключатели:

Наряду с переключателями, Help & Manual 4.2 также вводит условие по имени , которое Вы можете использовать в ваших шаблонах HTML . Это условие истинно, если текущий раздел содержит один или более переключателей. Это означает, что Вы можете использовать их, чтобы создать ссылки Развернуть все / Свернуть все, которые будут отображены только в разделах, содержащих переключатели.

Создание кнопки Печать , которая предразворачивает ваши переключатели:

Вы можете использовать функцию Развернуть все , чтобы создать ссылку Печати для Справки HTML и Броузерной справки, которая предразвернет все переключатели в текущем разделе перед его печатью. Для инструкций см. Печать разделов, содержащих переключатели .

См. также: