Interactions
Draggable
Droppable
Resizable
Selectable
Sortable
Widgets
Accordion
Autocomplete
Button
Datepicker
Dialog
Progressbar
Slider
Tabs
Effects
Add Class
Remove Class
Switch Class
Toggle Class
Show
Hide
Toggle
Animate
Effect
Utilities
Position
About jQuery UI
Getting Started
Upgrade Guide
Changelog
Roadmap
Subversion Access
UI Developer Guidelines
Theming
Theming jQuery UI
jQuery UI CSS Framework
ThemeRoller application
Theme Switcher Widget

Functional demo:

show

Show

Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.

Run Effect

Click the button above to preview the effect.


Warning: fopen(/srv/jqueryui.com/htdocs/libraries/cache/f2ef1dfa2dd5ce88bf4171da33c49a71) [function.fopen]: failed to open stream: No such file or directory in /srv/jqueryui.com/htdocs/libraries/fetch_documentation_page.php on line 29

Warning: fwrite(): supplied argument is not a valid stream resource in /srv/jqueryui.com/htdocs/libraries/fetch_documentation_page.php on line 30

Warning: fclose(): supplied argument is not a valid stream resource in /srv/jqueryui.com/htdocs/libraries/fetch_documentation_page.php on line 31

Overview

show( effect, [options], [speed], [callback] )

The enhanced show method optionally accepts jQuery UI advanced effects.

Uses a specific effect on an element to show the element if the first argument is a effect string.

Dependencies

  • Effects Core

Example

Apply the effect slide if you click on the p to show a div.

$("p").click(function () {
      $("div").show("slide", {}, 1000);
    });


<!DOCTYPE html>
<html>
<head>
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
  <script src="http://ui.jquery.com/latest/ui/effects.core.js"></script>
<script src="http://ui.jquery.com/latest/ui/effects.slide.js"></script>
<style type="text/css">
  div { display: none; margin: 0px; width: 100px; height: 80px; background: blue; position: relative; }
</style>
  <script>
  $(document).ready(function() {
    $("p").click(function () {
      $("div").show("slide", {}, 1000);
    });
  });
  </script>
</head>
<body style="font-size:62.5%;">
  
<p>Click me</p><div></div>

</body>
</html>

Arguments

  • effect

    Type:
    String

    The effect to be used. Possible values: 'blind', 'clip', 'drop', 'explode', 'fold', 'puff', 'slide', 'scale', 'size', 'pulsate'.

  • options

    Type:
    Hash
    Optional

    A object/hash including specific options for the effect.

  • speed

    Type:
    String, Number
    Optional

    A string representing one of the three predefined speeds ("slow", "normal", or "fast") or the number of milliseconds to run the animation (e.g. 1000).

  • callback

    Type:
    Function
    Optional

    A function that is called after the effect is completed.