Size Effect

Description: Resize an element to a specified width and height.

size
- to
  
  Type: Object
  
  Height and width to resize to.
- origin (default: [ "top", "left" ])
  
  Type: Array
  
  The vanishing point.
- scale (default: "both")
  
  Type: String
  
  Which areas of the element will be resized: "both", "box", "content". Box resizes the border and padding of the element; content resizes any content inside of the element.

When using this effect with the .show() and .toggle() methods, the to argument is used as the starting point and the original size used as the endpoint.

Example:

Resize the element using the size effect.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>size demo</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
  <style>
  #toggle {
    width: 100px;
    height: 100px;
    background: #ccc;
  }
  </style>
  <script src="//code.jquery.com/jquery-1.12.4.js"></script>
  <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
 
<p>Click anywhere to resize the box.</p>
<div id="toggle"></div>
 
<script>
$( document ).click(function() {
  $( "#toggle" ).effect( "size", {
    to: { width: 200, height: 60 }
  }, 1000 );
});
</script>
 
</body>
</html>

W3cubDocs

Size Effect

Size Effect

size

Example:

Demo: