jQuery UI API - Scale Effect

Category

Effects

Usage

Description:Scale an element by a percentage.

scale

Parameters Type Description Default Value
direction String The direction of the effect. Possible values: "both", "vertical", or "horizontal". "both"
origin Array Vanishing point. [ "middle", "center" ]
percent Number The percentage to scale to.
scale String Which area of the element will be resized: "both", "box", "content". When the value is "box", the size of the element's border and padding is adjusted. When the value is "content", the size of all content inside the element is adjusted. "both"

Examples

Example 1:

Use the Scale Effect to toggle a div.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>缩放特效（Scale 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( "scale" );
});
</script>
 
</body>
</html>

Example 2:

Use the Scale Effect to toggle a div in only one direction.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>>缩放特效（Scale 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({ effect: "scale", direction: "horizontal" });
});
</script>
 
</body>
</html>

Other Extensions