Demo of Resizable with animateEasing

linear

swing

easelnBack

easeOutBounce

The value of option animatEasing can be updated. We can set the value to linear, swing or easeOutBounce , this value will be used along with the animation effect.

We can read the value of animateEasing option.

Change the radio button in above demo to set / update the effect of animateEasing option of animation.

Check the sample code given below to understand how to set the option value or get ( read ) the option value already set.

Tutorial Resizable

Full Code

HTML

<input type='radio' name='r1' id='r1' value='linear' >linear
<input type='radio' name='r1' id='r1' value='swing' >swing
<input type='radio' name='r1' id='r1' value='easeOutBounce' checked>easeOutBounce
  
<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,
animateEasing: "easeOutBounce"
});
/////////

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

var sel = $(this).val();

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