What I want to do is

increase the width of the div that gets hovered over and equally decrease the width of the other 3 divs.

So if "div1" get hovered over, then "div1" width needs to be "40%"

and

the other 3 divs widths would go to "20%" which would equal 100%

This works with the code I have, but its not smooth and when I hover fast over multiple divs everything goes haywire. It's very buggy

What am I doing wrong?

Link of what I'm trying to do: https://constructlar.atakansaracoglu.com/

My HTML:

<div class="container">
   <div class="div1">
   </div><div class="div2">
   </div><div class="div3">
   </div><div class="div4">
   </div>
</div>

My CSS:

.container div {
   position: relative;
   display: inline-block;
   width: 25%;
}

My Script:

$(document).ready(function(){
  $('.container div').hover(function(){
     let $this = $(this);
     $this.siblings().animate({
       'width' : '19%'
     },200);
     $this.delay(200).animate({
       'width' :'40%'
     },300);
  });
});