jQuery UI API - Explode Effect

Category

Effects

Usage

Description:The Explode Effect hides or shows an element by splitting it into fragments.

explode

Parameters Type Description Default value
pieces Integer The number of fragments to explode into. It should be a square number; any other value is rounded to the nearest square number. 9

Example

Toggle a div using the Explode Effect.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>爆炸特效（Explode 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( "explode" );
});
</script>
 
</body>
</html>

Other extensions