Size effect

Size Effect

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="/doc_/-code-jquery-com-ui-1-12-0-themes-smoothness-jquery-ui-css.html?lang=en">
  <style>
  #toggle {
    width: 100px;
    height: 100px;
    background: #ccc;
  }
  </style>
  <script src="//code.jquery.com/jquery-1.12.4.js" rel="external nofollow" ></script>
  <script src="//code.jquery.com/ui/1.12.0/jquery-ui.js" rel="external nofollow" ></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>

Demo:

© The jQuery Foundation and other contributors
Licensed under the MIT License.
https://api.jqueryui.com/size-effect

在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号

意见反馈
返回顶部