# jQuery UI API - Scale Effect
## Category
(#)
## Usage
**Description:** Scales an element by a certain percentage.
scale
| Parameter | Type | Description | Default |
| --- | --- | --- | --- |
| direction | String | The direction of the effect. Possible values: "both", "vertical", or "horizontal". | "both" |
| origin | Array | The 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 set to "box", resizes the element's border and padding. When set to "content", resizes all content within the element. | "both" |
## Examples
**Example 1:**
Toggle a div using the Scale Effect.
Scale Effect Demo #toggle { width: 100px; height: 100px; background: #ccc; }
Click anywhere to toggle.
$( document ).click(function() { $( "#toggle" ).toggle( "scale" );});
(#)
**Example 2:**
Toggle a div using the Scale Effect in only one direction.
Scale Effect Demo #toggle { width: 100px; height: 100px; background: #ccc; }
Click anywhere to toggle.
$( document ).click(function() { $( "#toggle" ).toggle({ effect: "scale", direction: "horizontal" });});
(#)
[](#)[jQuery UI API – .removeClass()](#)
[jQuery UI API – Shake Effect](#)[](#)
[Volcengine Coding Plan supports mainstream large models like Doubao, GLM, DeepSeek, Kimi, MiniMax, officially supplied and reliable. Configuration Guide ¥9.9/month Subscribe Now](https://maas.xfyun.cn/modelSquare?ch=maas_lm_l2E)
YouTip