Demo of Resizable animateDuration

Slow

Fast

20000 Milliseconds

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

Tutorial Resizable

Full Code

HTML

<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>
<br>
<br>
<div id="resize_id" class=resize_cl></div>

JQuery

<script>
$(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'){
sel=parseInt(sel);	
}else{
sel=$(this).val();		
}

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