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.