jQuery UI API - Size Effect

Category

Effects

Usage

Description:Adjust the element's size to the specified width and height.

size

Parameters Type Description Default value
to Object The height and width to adjust to.
origin Array Vanishing point. [ "top", "left" ]
scale String Which area of the element should 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 within the element is adjusted. "both"

Examples

Use the Size Effect to adjust element size.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>尺寸特效（Size 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" ).effect( "size", {
    to: { width: 200, height: 60 }
  }, 1000 );
});
</script>
 
</body>
</html>

Other Extensions