❮ Api Color Animation Ref Effects Core ❯

jQuery UI API - Size Effect

Usage

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

Parameter	Type	Description	Default Value
to	Object	The width and height to adjust to.
origin	Array	The vanishing point.	[ "top", "left" ]
scale	String	Which area of the element will be adjusted: "both", "box", "content". When the value is "box", it adjusts the size of the element's border and padding. When the value is "content", it adjusts the size of all content inside the element.	"both"

Example

Using the Size Effect to adjust the element's size.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Size Effect Demo</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>Click anywhere to adjust the size.</p>
<div id="toggle"></div>

<script>
$( document ).click(function() {
  $( "#toggle" ).effect( "size", {
    to: { width: 200, height: 60 }
  }, 1000 );
});
</script>

</body>
</html>

View Demo

❮ Api Color Animation Ref Effects Core ❯

jQuery UI API - Size Effect

Category

Usage

Example