In this tutorial, we will learn Jquery Ui resizable Animate Example Tutorial
Example :
<!DOCTYPE html>
<html>
<head>
<title>jQuery UI Resizable : Animating the Resizable</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.3/themes/hot-sneaks/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-2.1.3.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<style>
#coach{
width:300px;
height:300px;
margin:30px;
border:5px solid #ddd;
overflow:hidden;
box-shadow:5px 5px 5px #444;
background-color:#44c765;
margin: 0 auto;
}
body{
text-align: center;
}
</style>
</head>
<body>
<h2>JQuery UI Resizable - rathorji.in</h2>
<div id="coach" class="ui-widget">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQ7Bo00Wr7bTO5_C3ZO6i3jW03D8Iw_sbdIANXN1enTgDCdN5jN&usqp=CAU" />BUS -<br> While Resizing the Box you will notice a resizable ghost which disappears when resizing is complete.
</div>
<script>
$(document).ready(function() {
$("#coach").resizable({
ghost: true,
animate: true,
animateDuration: "slow"
});
});
</script>
</body>
</html>
May this example help you.