jQuery UI API - Puff Effect

Category

Effects

Usage

Description:Creates the Puff Effect by hiding the element while scaling it.

puff

Parameters Type Description Default value
percent Number The percentage to scale to. 150

Examples

Use the Puff Effect to toggle a div.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>膨胀特效（Puff Effect）演示</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <style>
  #toggle {
    width: 100px;
    height: 100px;
    background: #ccc;
  }
  </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 id="toggle"></div>
 
<script>
$( document ).click(function() {
  $( "#toggle" ).toggle( "puff" );
});
</script>
 
</body>
</html>

Other extensions