Demo of Resizable with animation using JQuery UI

To resize the element, drag it by using right side or bottom border. After dragging leave the pointer, the element will take the new size by using animation. We can set the animation option to true or false by using the code below. By default the animation is set to false, i.e. no animation.
Check the sample code below.

Tutorial Resizable

Full Code

HTML

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

JQuery

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

If we don't want animation while resizing then set the animation option to false

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