jQuery UI API - .effect()

Категория

Эффекты | Ядро эффектов | Методы

Использование

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

Возвращает:jQuery

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

Parameters Type Описание Default
effect String Строка, указывающая, какой effect использовать.
options Object Настройки, специфичные для эффекта, иeasing。
duration Число или строка Строка или число, указывающее, как долго будет выполняться анимация. 400
complete Function() Функция, которая вызывается после завершения анимации.

.effect( options )

Parameters Type Описание
options Object Все настройки анимации. Единственное обязательное свойство — effect.
  • effect
    Тип: String
    Описание: строка, указывающая, какой эффект использовать。
  • easing(По умолчанию:"swing"）
    Тип: String
    Описание: строка, указывающая функциюeasing, которую нужно использовать.
  • duration(По умолчанию:400）
    Тип: Number или String
    Описание: Строка или число, указывающее, как долго будет выполняться анимация.
  • complete
    Тип: Function()
    Описание: функция, вызываемая после завершения анимации.
  • queue(По умолчанию:true）
    Тип: Boolean или String
    Описание: логическое значение, указывающее, следует ли помещать анимацию в очередь эффектов. Если false, анимация начнется немедленно.Начиная с jQuery 1.7, опция queue также принимает строку, в этом случае анимация добавляется в очередь, представленную строкой.

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

Примеры

Применить эффект отскока к div.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>.effect() 演示</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <style>
  div {
    width: 100px;
    height: 100px;
    background: #ccc;
    border: 1px solid #000;
  }
  </style>
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
 
<p>点击任意地方应用特效。</p>
<div></div>
 
<script>
$( document ).click(function() {
  $( "div" ).effect( "bounce", "slow" );
});
</script>
 
</body>
</html>

Другие расширения