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