使用 jquery 将鼠标悬停在每个 div 上时，如何同时平滑地调整多个 div 的大小

Question

我想做的是

增加悬停在上的div的宽度，并同样减少其他3个[=的宽度57=]s.

因此，如果 "div1" 悬停在上方， 那么 "div1" 宽度需要 "40%"

和

其他 3 divs 宽度将变为 "20%"，这将等于 100%

这适用于我的代码，但它并不流畅，当我快速悬停在多个 div 上时，一切都变得一团糟。非常有问题

我做错了什么？

Link 我正在尝试做的事情：https://constructlar.atakansaracoglu.com/

我的HTML:

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

我的CSS:

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

我的脚本：

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

Answer 1

使用 CSS 和 transition 属性 而不是 jQuery 使页面更流畅。

.container div {
   position: relative;
   display: inline-block;
   width: 25%;
   height: 100px;
   transition: width 0.4s;
}

.container:hover div {
    width: 20%;
}

.container div:hover {
    width: 40%;
}

<div class="container">
   <div class="div1" style="background:red">
   </div><div class="div2" style="background:cyan">
   </div><div class="div3" style="background:yellow">
   </div><div class="div4" style="background:green">
   </div>
</div>