.addClass()

.addClass( className [, duration ] [, easing ] [, complete ] )Возвращает: jQuery

Описание: Добавляет указанные класс(ы) к каждому из набора совпавших элементов, одновременно анимируя все изменения стиля.

.addClass( className [, duration ] [, easing ] [, complete ] )
- className
  
  Тип: Строка
  
  Один или несколько имен классов (разделенных пробелами), которые нужно добавить к атрибуту class каждого совпавшего элемента.
- duration (по умолчанию: 400)
  
  Тип: Число или Строка
  
  Строка или число, определяющие продолжительность анимации.
- easing (по умолчанию: swing)
  
  Тип: Строка
  
  Строка, указывающая, какую функцию сглаживания (easing) использовать для перехода.
- complete
  
  Тип: Функция()
  
  Функция, вызываемая по завершении анимации, вызывается один раз для каждого совпавшего элемента.
.addClass( className [, options ] )
- className
  
  Тип: Строка
  
  Один или несколько имен классов (разделенных пробелами), которые нужно добавить к атрибуту class каждого совпавшего элемента.
- options
  
  Тип: Объект
  
  Все параметры анимации. Все свойства необязательны.
  - duration (по умолчанию: 400)
    
    Тип: Число или Строка
    
    Строка или число, определяющие продолжительность анимации.
  - easing (по умолчанию: swing)
    
    Тип: Строка
    
    Строка, указывающая, какую функцию сглаживания (easing) использовать для перехода.
  - complete
    
    Тип: Функция()
    
    Функция, вызываемая по завершении анимации, вызывается один раз для каждого совпавшего элемента.
  - children (по умолчанию: false)
    
    Тип: Булево
    
    Указывает, должна ли анимация быть дополнительно применена ко всем потомкам совпавших элементов. Эту функцию следует использовать с осторожностью, поскольку стоимость определения потомков для анимации может быть очень высокой и растет линейно с количеством потомков.
  - queue (по умолчанию: true)
    
    Тип: Булево или Строка
    
    Булево значение, указывающее, следует ли поместить анимацию в очередь эффектов. Если false, анимация начнется немедленно. Также может быть предоставлена строка, в этом случае анимация добавляется в очередь, представленную этой строкой.

Аналогично родственным CSS-переходам, анимации классов jQuery UI обеспечивают плавный переход от одного состояния к другому, позволяя сохранить все детали о том, какие стили необходимо изменить в CSS, а не в JavaScript. Все методы анимации классов, включая .addClass(), поддерживают настраиваемые продолжительности и сглаживания, а также предоставляют обратный вызов, когда анимация завершается.

Не все стили можно анимировать. Например, нет возможности анимировать изображение фона. Любые стили, которые нельзя анимировать, будут изменены в конце анимации.

Этот плагин расширяет встроенный метод jQuery .addClass(). Если jQuery UI не загружен, вызов метода .addClass() может не завершиться ошибкой напрямую, так как метод всё ещё существует. Однако ожидаемого поведения не произойдёт.

Пример:

Добавляет класс "big-blue" к совпавшим элементам.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>addClass 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 ).addClass( "big-blue", 1000, "easeOutBounce" );
});
</script>
 
</body>
</html>

.addClass( className [, duration ] [, easing ] [, complete ] )Возвращает: jQuery

.addClass( className [, duration ] [, easing ] [, complete ] )

.addClass( className [, options ] )

Пример:

Демо: