Demo of Resizable animateDuration

The value of option animateDuration can be updated. We can set the value to slow, fast or to any number value in milliseconds , this value will be used as time or duration for the animation effect. Drag the right or right buttom corner of the box to resize it.

For third radio button the value is set to 20000, you can update it to any other value.

Change the radio button in above demo to check the effect of duration of animation. If you set the value to 20000 Milliseconds then speed of animation will be very slow so drag the pointer to minimum distance to observe the animation.
Check the sample code below

Full Code

<input type='radio' name='r1' id='r1' value='slow' checked>Slow 
<input type='radio' name='r1' id='r1' value='fast' >Fast
<input type='radio' name='r1' id='r1' value='20000'>20000 Milliseconds
<button type='button' class='btn btn-secondary'  id=d1></button>
<div id="resize_id" class=resize_cl></div>
$(document).ready(function() {
$( "#resize_id" ).resizable({
animate: true
var present_class = $( "#resize_id" ).resizable( "option", "animateDuration" );
$('#d1').html( " <b>Status of animateDuration:</b> " + present_class );
$("input:radio[name=r1]").click(function() {
var sel = $(this).val();
if(sel != 'fast' && sel != 'slow'){

$( "#resize_id" ).resizable( "option", "animateDuration", sel );
var present_class = $( "#resize_id" ).resizable( "option", "animateDuration" );
$('#d1').html( " <b>Status of animateDuration:</b> " + present_class );

Tutorial Resizable

Options|resizable|alsoResize|animate | animate get set|animateDuration| animateEasing|aspectRatio| autoHide cancel classes containment disabled ghost grid handles helper maxHeight maxWidth minWidth minHeight


destroy disable enable