Набор методов семейства slide

Методы slideUp(), slideDown() и slideToggle() работают с высотой блоков.

$(" #menu" ).click(function(){

$(" #submenu" ).slideDown();

});

Используя эти методы, можно создать популярное меню типа " аккордеон". На рисунке 83 представлено меню аккордеон в свернутом состоянии

Рисунок 83– Пример меню типа " Аккордеон"

При нажатии на " Лечебные отделения стационара", метод slideDown() увеличивает высоту блока и открывает подменю, как это видно на рисунке 84.

Рисунок 84– Пример меню типа " Аккордеон" в развернутом виде

Метод animate()

Метод animate() выполняет заданную пользователем анимацию с выбранными элементами. Анимация происходит за счет плавного изменения CSS-свойств у элементов.

Метод имеет два варианта использования:

.animate(properties, [duration], [easing], [callback]): jQuery

properties — свойства CSS, которые изменяются в процессе анимации.

duration — продолжительность выполнения анимации. Может быть задана в миллисекундах или строковым значением 'fast' или 'slow'.

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

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

properties — свойства CSS, которые изменяются в процессе анимации.

options — одна из дополнительных опций. Должны быть представлены объектом, в формате опция: значение.

Варианты опций:

duration — продолжительность выполнения анимации.

easing — изменение скорости анимации (анимация может ускоряться или замедляться к концу).

complete — функция, которая будет вызвана после завершения анимации.

step — функция, вызывающаяся после каждого шага анимации.

queue — принимает значение true или false, указывает нужно ли ставить текущую анимацию в очередь функций. В случае false, анимация будет запущена сразу же, не вставая в очередь.

specialEasing — позволяет установить разные значения easing, для разных CSS-параметров. Задается объектом, в формате параметр: значение.

Рассмотрим пример использования анимации. К примеру, нужно анимировать элемент с идентификатором #div1 так, чтобы он сначала в течение 1000 мс исчезал с экрана, а затем в течение 500 мс снова появлялся. Функции animate(), примененные к одному элементу, выполняются поочередно, поэтому сначала выполнится первая функция, отвечающая за плавное удаление элемента, а затем функция появления на экране.

$(" #div1" ).animate({height: " hide" }, 1000);

$(" #div1" ).animate({height: " show" }, 500);

Стоит заметить, что функции animate(), примененные к разным элементам на странице, будут выполняться параллельно:

$(" #div1" ).animate({height: " hide" }, 1000);

$(" #div2" ).animate({height: " show" }, 500);

Элемент с идентификатором #div1 будет исчезать параллельно с появлением элемента #div2 на странице.

Ниже представлена таблица 10 с описанием основных методов анимации jQuery.

Таблица 10 – Основные методы анимации jQuery

Функция jQuery	Описание функции
.clearQueue()	Функция удаляет из очереди все функции, которые еще не были запущены
.delay()	Отсрочивает запуск функций в очереди
.dequeue()	Инициирует запуск следующей функции в очереди для выбранных элементов
.finish()	Останавливает выполнение всех запущенных функций, удаляет все функции в очереди на выполнение и завершает все анимации для выбранных объектов
jQuery.fx.interval	Данное свойство содержит временной промежуток (в миллисекундах) между кадрами анимации. По умолчанию, оно равно 13

Подробнее об анимации с использованием jQuery можно узнать на официальном сайте разработчика http: //jquery.com/.

Навигация по дереву DOM

В jQuery существует целый набор методов, предназначенных для навигации по объектной модели документа. Рассмотрим самые популярные из них.

Метод children()

Метод children() вернет всех потомков выбранного элемента.

Используя указанный метод, можно пройти один уровень вниз по дереву DOM. Если у элемента нет потомков кроме текстовых узлов, то метод children() их не вернет. Для получения текстового содержимого элементов нужно воспользоваться методом contents().

Рассмотрим пример применения метода children(). Требуется найти потомков тега < ul>.

<! DOCTYPE html>

< html>

< head>

< script src=" https: //ajax. Googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js" > < /script>

< script>

$(document).ready(function(){

$(" ul" ).children());

});

< /script>

< /head>

< body>

< ul>

< li> Элемент №1< /li> < li> Элемент №2< /li>

< /ul>

< /body>

< /html>

Результатами скрипта будет запись: «Элемент №1 и Элемент №2»

Метод closest()

Иногда бывает полезно узнать предка элемента, то есть подняться на один уровень вверх по модели DOM. Для этого используется метод closest(). К примеру, изменим цвет фона ненумерованного списка на красный

$(document).ready(function(){
$(" span" ).closest(" ul" ).css({" color": " red" });
});

Метод parents()

Другим методом для доступа к родителям элемента является метод parents(). Данный метод возвращает всех предков выбранного элемента. parents() путешествует вверх по дереву DOM пока не дойдет до корневого элемента < html>.

$(selector).parents(filter)

Работа метода очень похожа на работу метода closest(). Однако существует несколько отличий:

Метод parents():

- начинает работу с родительского элемента;

- продвигается вверх по дереву DOM;

- и возвращает всех предков возвращаемый объект jQuery;

- содержит либо 0, либо больше одного элемента.

Метод closest():

- начинает работу с текущего элемента;

- продвигается вверх по дереву DOM и возвращает первый родительский элемент, удовлетворяющий условиям;

- возвращаемый объект jQuery содержит либо 0, либо 1 элемент.

⇐ Предыдущая 26 27 28 29 303132 33 34 35 Следующая ⇒