Demo Resizable with animation get & set

False

True

Change the animate option to true or false by selecting the respective radio buttons.

Full Code

HTML

<div class='form-check-inline'>
  <label><input type='radio' name='r1' id='r1' value='false' checked>False</label>
</div>
<div class='form-check-inline'>
  <label><input type='radio' name='r1' id='r2' value='true' >True</label>
</div>

</div><div class='col-md-8'>
<button type='button' class='btn btn-secondary'  id=d1></button></div>
</div>


<div class='row'> <div class='col-md-12'>

<div id="resize_id" class=resize_cl></div>

JQuery

<script>
$(document).ready(function() {
//////////////////////////
$( "#resize_id" ).resizable({
animate: false
});
/////////

var present_class = $( "#resize_id" ).resizable( "option", "animate" );
$('#d1').html( " <b>Status of animate:</b> " + present_class );
//////////
$("input:radio[name=r1]").click(function() {
var sel = ($(this).val() == 'true');
$( "#resize_id" ).resizable( "option", "animate", sel );
var present_class = $( "#resize_id" ).resizable( "option", "animate" );
$('#d1').html( " <b>Status of animate:</b> " + present_class );
})

///////
})
</script>