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:

effect

Effect

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 show the effect.


Warning: fopen(/srv/jqueryui.com/htdocs/libraries/cache/5ea42442ee6f237d4d89e64b8c706564) [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

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

Uses a specific effect on an element (without the show/hide logic).

Dependencies

  • Effects Core

Example

Apply the effect explode if you click on the element.

$("p").click(function () {
      $("div").effect("explode");
    });


<!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.explode.js"></script>
<style type="text/css">
  div { margin: 0 auto; width: 100px; height: 80px; background: blue; position: relative; }
</style>
  <script>
  $(document).ready(function() {
    $("p").click(function () {
      $("div").effect("explode");
    });
  });
  </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', 'bounce', 'clip', 'drop', 'explode', 'fold', 'highlight', 'puff', 'pulsate', 'scale', 'shake', 'size', 'slide', 'transfer'.

  • 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.