animations

<!DOCTYPE html>
<html>
<head>
    <script src = "jquery-3.5.1.min.js"></script>
    <script>
        $(document).ready(function () {
            $("button").click(function () {
                $(".div").animate({height:'300px',opacity:'0,5'},"slow");
                $(".div").animate({width:'300px',opacity:'0.7'},"slow");
                $(".div").animate({height:'100px',opacity:'0.8'},"slow");
                $(".div").animate({width:'100px',opacity:'0.9'},"slow");

            });

        });

        $(document).ready(function () {
            $("button").click(function () {
                $(".div1").animate({left:'110px'});
                $(".div1").animate({height: '300px', opacity: '0,5'}, "slow");
                $(".div1").animate({width: '300px', opacity: '0.7'}, "slow");
                $(".div1").animate({height: '100px', opacity: '0.8'}, "slow");
                $(".div1").animate({width: '100px', opacity: '0.9'}, "slow");

            });
        });


    </script>
</head>
<body>
<button>click me!</button>
<div class="div" style="background-color: #1c94c4;width: 100px;height: 100px;position: absolute"></div>
<div class="div1" style="background-color: black;width: 100px;height: 100px;position: absolute"></div>
</body>
</html>