jQuery Conference 2012
Interactions
Draggable
Droppable
Resizable
Selectable
Sortable
Widgets
Accordion
Autocomplete
Button
Datepicker
Dialog
Progressbar
Slider
Tabs
Effects
Color Animation
Toggle Class
Add Class
Remove Class
Switch Class
Effect
Toggle
Hide
Show
Utilities
Position
Widget
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

UI/Effects/Puff

Overview

This is the only effect without seperate file, it uses effects.scale.js. It creates a puff effect by scaling the element up and hiding it at the same time.

Dependencies

  • Effects Core
  • Scale effect

Example

Puff the element away.

$("div").click(function () {
      $(this).hide("puff", {}, 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.5/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
  <style type="text/css">
  div { margin: 0px; width: 100px; height: 80px; background: green; border: 1px solid black; position: relative; }
</style>

  <script>
  $(document).ready(function() {
    
$("div").click(function () {
      $(this).hide("puff", {}, 1000);
});

  });
  </script>
</head>
<body style="font-size:62.5%;">
  <div></div>
</body>
</html>

Arguments

  • mode

    Type:
    String
    Default:
    "hide"

    The mode of the effect. Can be "show" or "hide"

  • percent

    Type:
    Integer
    Default:
    150

    The percentage to scale to.