.toggleClass( className [, switch ] [, duration ] [, easing ] [, complete ] )Возвращает: jQuery
Описание: Добавляет или удаляет один или несколько классов от каждого элемента в наборе совпавших элементов, в зависимости от наличия класса или значения аргумента switch, анимируя все изменения стилей.
-
.toggleClass( className [, switch ] [, duration ] [, easing ] [, complete ] )
- classNameТип: СтрокаОдин или несколько имён классов (разделенных пробелом), которые нужно переключить для каждого элемента в наборе совпавших элементов.
- switchТип: БулевоБулево значение, определяющее, нужно ли добавить или удалить класс.
- duration (по умолчанию:
400)Строка или число, определяющее, как долго будет выполняться анимация. - easing (по умолчанию:
swing)Тип: СтрокаСтрока, указывающая, какую функцию сглаживания использовать для перехода. - completeТип: Функция()Функция, вызываемая после завершения анимации, вызывается один раз на совпавший элемент.
-
-
.toggleClass( className [, switch ] [, options ] )
- classNameТип: СтрокаОдин или несколько имён классов (разделенных пробелом), которые нужно переключить для каждого элемента в наборе совпавших элементов.
- switchТип: БулевоБулево значение, определяющее, нужно ли добавить или удалить класс.
- optionsТип: ОбъектВсе параметры анимации. Все свойства необязательны.
- duration (по умолчанию:
400)Строка или число, определяющее, как долго будет выполняться анимация. - easing (по умолчанию:
swing)Тип: СтрокаСтрока, указывающая, какую функцию сглаживания использовать для перехода. - completeТип: Функция()Функция, вызываемая после завершения анимации, вызывается один раз на совпавший элемент.
- children (по умолчанию:
false)Тип: БулевоНужно ли дополнительно применить анимацию ко всем дочерним элементам совпавших элементов. Эту функцию следует использовать с осторожностью, так как стоимость определения дочерних элементов для анимации может быть очень высокой и возрастает линейно с количеством дочерних элементов. - queue (по умолчанию:
true)Булево значение, указывающее, нужно ли помещать анимацию в очередь эффектов. Еслиfalse, анимация начнется немедленно. Также может быть указана строка, в этом случае анимация добавляется в очередь, представленную этой строкой.
-
-
Аналогично нативным CSS-переходам, анимации классов jQuery UI обеспечивают плавный переход от одного состояния к другому, позволяя вам сохранять все детали о том, какие стили изменять в CSS, а не в JavaScript. Все методы анимации классов, включая .toggleClass(), поддерживают пользовательские длительности и сглаживания, а также предоставляют обратный вызов на завершение анимации.
Не все стили могут быть анимированы. Например, нельзя анимировать изображение фона. Любые стили, которые нельзя анимировать, будут изменены в конце анимации.
Этот плагин расширяет встроенный метод jQuery .toggleClass(). Если jQuery UI не загружен, вызов метода .toggleClass() может не привести к прямой ошибке, так как метод всё ещё существует. Однако ожидаемое поведение не произойдёт.
Пример:
Переключает класс "big-blue" для совпавших элементов.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>toggleClass demo</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.3/themes/smoothness/jquery-ui.css">
<style>
div {
width: 100px;
height: 100px;
background-color: #ccc;
}
.big-blue {
width: 200px;
height: 200px;
background-color: #00f;
}
</style>
<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<script src="https://code.jquery.com/ui/1.13.3/jquery-ui.js"></script>
</head>
<body>
<div></div>
<script>
$( "div" ).click(function() {
$( this ).toggleClass( "big-blue", 1000, "easeOutSine" );
});
</script>
</body>
</html> 
