Latest web development tutorials

jQuery UI API - .effect ()

category

Special effects (Effects) | Effects Core (Core Effects) | Methods (Methods)

usage

Description: Application of an element of animation effects.

Returns: the jQuery

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

参数 类型 描述 默认值
effect String 一个字符串,指示要使用哪一种特效
options Object 特效具体的设置和 easing
duration Number 或 String 一个字符串或一个数字,指定动画将运行多久。 400
complete Function() 一旦动画完成时要调用的函数。

.effect( options )

参数 类型 描述
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() method is applied to an element named animation effects . Many special effects also supports display or hide mode, these can be .show() , .hide() and .toggle() to complete the method.

Examples

Div application for a rebound effect (Bounce Effect).

<! Doctype html>
<Html lang = "en">
<Head>
  <Meta charset = "utf-8">
  <Title> .effect () Demo </ 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> Click anywhere in the application of special effects. </ P>
<Div> </ div>
 
<Script>
$ (Document) .click (function () {
  $ ( "Div") .effect ( "bounce", "slow");
});
</ Script>
 
</ Body>
</ Html>