Demo of Resizable with animateEasing

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.

Full Code

<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>
<div id="resize_id" class=resize_cl></div>
$(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 );

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