Latest web development tutorials

jQuery UI API - .show ()

category

Special effects (Effects) | Effects Core (Core Effects) | Method overloading (Method, Overrides) | Methods (Methods)

usage

Description: Use custom effects to show matching elements.

Returns: the jQuery

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

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

.show( 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 选项也接受一个字符串，在这种情况下，动画添加到由字符串表示的队列中。

The plug-ins extend the built-in self jQuery .show () method. If jQuery UI is not loaded, call .show() method does not simply fail, because the method exists in jQuery. But it is not expected behavior.

Examples

Fold-effects (Fold Effect) show a div. 

<! Doctype html>
<Html lang = "en">
<Head>
  <Meta charset = "utf-8">
  <Title> .show () Demo </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Style>
  div {
    display: none;
    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>
 
<Button> display div </ button>
<Div> </ div>
 
<Script>
$ ( "Button") .click (function () {
  $ ( "Div") .show ( "fold", 1000);
});
</ Script>
 
</ Body>
</ Html>