jQuery UI API - .effect()

Category

Effects | Effects Core | Methods

Usage

Description:Apply an animation effect to an element.

Returns:jQuery

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

Parameters Type Description Default
effect String A string indicating whicheffect to use。
options Object Effect-specific settings andeasing。
duration Number or String A string or a number specifying how long the animation will run. 400
complete Function() A function to call once the animation is complete.

.effect( options )

Parameters Type Description
options Object All animation settings. The only required property is effect.
  • effect
    Type: String
    Description: A string indicating whicheffect to use。
  • easing(Default:"swing"）
    Type: String
    Description: A string indicating theeasingfunction to use.
  • duration(Default:400）
    Type: Number or String
    Description: A string or a number specifying how long the animation will run.
  • complete
    Type: Function()
    Description: A function to call once the animation is complete.
  • queue(Default:true）
    Type: Boolean or String
    Description: A Boolean indicating whether to place the animation in the effects queue. If false, the animation will begin immediately.As of jQuery 1.7, the queue option also accepts a string, in which case the animation is added to the queue represented by the string.

.effect()The method applies a named animation to an elementeffect. Many effects also support show or hide modes, which can be.show()、.hide()and.toggle()accomplished through the method.

Examples

Apply a bounce effect to a 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>

Other Extensions