Open In App

jQuery UI Resizable delay Option

Last Updated : 09 Mar, 2021
Improve
Improve
Like Article
Like
Save
Share
Report

The jQuery UI consists of GUI widgets, visual effects, and themes implemented using jQuery, CSS, and HTML. jQuery UI is great for building UI interfaces for the webpages. The jQuery UI Resizable delay Option is used to add some delay to resize an element.

Syntax:

$(".selector").resizable({
    delay: number
});

CDN Link: First, add jQuery UI scripts needed for your project.

<link rel=”stylesheet” href=”//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css”>
<script src=”//code.jquery.com/jquery-1.12.4.js”></script>
<script src=”//code.jquery.com/ui/1.12.1/jquery-ui.js”></script>

Example:

HTML




<!doctype html>
<html lang="en">
  
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href=
"//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
    <script src=
"//code.jquery.com/jquery-1.12.4.js">
    </script>
    <script src=
"//code.jquery.com/ui/1.12.1/jquery-ui.js">
    </script>
    <style>
        h1 {
            color: green;
        }
  
        #box {
            width: 500px;
            height: 250px;
            border: 2px solid orange;
            float: left
        }
  
        #first_div {
            width: 150px;
            height: 150px;
            background: green;
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
        }
    </style>
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
  
    <h3>jQuery UI Resizable delay Option</h3>
    <div id="first_div">Div content</div>
  
    <script>
        $(function () {
            $("#first_div").resizable({
                animate: true,
                delay: 150
            });
        });
    </script>
</body>
  
</html>


Output:


Reference:https://api.jqueryui.com/resizable/#option-delay



Previous Article
Next Article

Similar Reads

jQuery UI Resizable maxWidth Option
The jQuery UI consists of GUI widgets, visual effects, and themes implemented using jQuery, CSS, and HTML. jQuery UI is great for building UI interfaces for the webpages. The jQuery UI Resizable maxWidth Option is used to set the maximum width of the resizable element. Syntax: $(".selector").resizable({ maxWidth: width_val }); CDN Link: First, add
1 min read
jQuery UI Dialog resizable Option
'resizable option' if set to false the dialog box will not be resizable. By default, value is true. Syntax: $( ".selector" ).dialog({ resizable: false }); Approach: First, add jQuery UI scripts needed for your project. &lt;link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel = "stylesheet"&gt; &lt;script src = "http
2 min read
jQuery UI Resizable animate Option
The jQuery UI consists of GUI widgets, visual effects, and themes implemented using jQuery, CSS, and HTML. jQuery UI is great for building UI interfaces for the webpages. The jQuery UI Resizable animate option is used to animate and resize the box into the final size after resizing. It holds a boolean type value and its default value is false. Synt
1 min read
jQuery UI Resizable containment Option
jQuery UI consists of GUI widgets, visual effects, and themes implemented using jQuery, CSS, and HTML. jQuery UI is great for building UI interfaces for the webpages. The jQuery UI Resizable containment option is used for resizing the element within the given boundary element. Syntax: $(".selector").resizable({ containment: "parent" }); CDN Links:
1 min read
jQuery UI Resizable classes Option
jQuery UI consists of GUI widgets, visual effects, and themes implemented using jQuery, CSS, and HTML. jQuery UI is great for building UI interfaces for the webpages. The jQuery UI Resizable classes option is used to add some additional jQuery UI classes. Syntax: $(".selector").resizable({ classes: { "ui-resizable": "highlight" } }); CDN Link: Firs
1 min read
jQuery UI Resizable cancel Option
jQuery UI consists of GUI widgets, visual effects, and themes implemented using jQuery, CSS, and HTML. jQuery UI is great for building UI interfaces for the webpages. The jQuery UI Resizable cancel option is used to prevent resizing from starting on specified elements. Syntax: $(".selector").resizable({ cancel: ".cancel" }); CDN Link: First, add jQ
1 min read
jQuery UI Resizable autoHide Option
jQuery UI consists of GUI widgets, visual effects, and themes implemented using jQuery, CSS, and HTML. jQuery UI is great for building UI interfaces for the webpages. The jQuery UI Resizable autoHide option is used to handle, how to hide when the user is not hovering over the element. Syntax: $(".selector").resizable({ autoHide: true }); CDN Link:
1 min read
jQuery UI Resizable aspectRatio Option
jQuery UI consists of GUI widgets, visual effects, and themes implemented using jQuery, CSS, and HTML. jQuery UI is great for building UI interfaces for the webpages. The jQuery UI Resizable aspectRatio option is used to set whether the element should be constrained to a specific aspect ratio or not. It holds Boolean or number type value and its de
1 min read
jQuery UI Resizable animateEasing Option
jQuery UI consists of GUI widgets, visual effects, and themes implemented using jQuery, CSS, and HTML. jQuery UI is great for building UI interfaces for the webpages. The jQuery UI Resizable animateEasing option is used to create an animation effect. This option works with the animate option. It holds the string value and its default value is "swin
1 min read
jQuery UI Resizable animateDuration Option
The Query UI consists of GUI widgets, visual effects, and themes implemented using jQuery, CSS, and HTML. jQuery UI is great for building UI interfaces for the webpages. The jQuery UI Resizable animateDuration option is used to animate the resizable element in a given duration. It takes number or string type value and its default value is "slow". T
1 min read