.effect()

.effect( effect [, options ] [, duration ] [, complete ] )Возвращает: jQuery

Описание: Применить эффект анимации к элементу.

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

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

Пример:

Применить эффект bounce к div.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>effect 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: #ccc;
    border: 1px solid #000;
  }
  </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>
 
<p>Click anywhere to apply the effect.</p>
<div></div>
 
<script>
$( document ).click(function() {
  $( "div" ).effect( "bounce", "slow" );
});
</script>
 
</body>
</html>

.effect( effect [, options ] [, duration ] [, complete ] )Возвращает: jQuery

.effect( effect [, options ] [, duration ] [, complete ] )

.effect( options )

Пример:

Демо: