Как плавно изменить размер нескольких div одновременно при наведении курсора на каждый из них с помощью jquery

Я хочу сделать это

увеличьте ширина div, который получает завис над, и в равной степени уменьшите ширину остальных 3 div.

Итак, если "дел1" наведен курсором мыши, тогда ширина "дел1" должна быть "40%"

и

ширина другие 3 раздела будет равна "20%", что будет равно 100%

Это работает с кодом, который у меня есть, но он не гладкий, и когда я быстро навожу курсор на несколько div, все идет наперекосяк. это очень глючит

Что я делаю не так?

Ссылка на то, что я пытаюсь сделать: 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);
  });
});

Я думаю, вам следует отказаться от использования JS. CSS flexbox сделает эту работу.

anotherOne 22.04.2022 22:51
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Сравнение структур данных: Массивы и объекты в Javascript
Сравнение структур данных: Массивы и объекты в Javascript
Итак, вы изучили основы JavaScript и хотите перейти к изучению структур данных. Мотивация для изучения/понимания Структур данных может быть разной,...
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Прошлая статья была первой из цикла статей о создании системы электронной коммерции с использованием Keystone.js, и она была посвящена главным образом...
Приложение для отслеживания бюджета на React js для начинающих
Приложение для отслеживания бюджета на React js для начинающих
Обучение на практике - это проверенная тема для достижения успеха в любой области. Если вы знаете контекст фразы "Практика делает человека...
Стоит ли использовать React в 2022 году?
Стоит ли использовать React в 2022 году?
В 2022 году мы все слышим о трендах фронтенда (React, Vue), но мы не знаем, почему мы должны использовать эти фреймворки, когда их использовать, а...
0
1
25
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 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>

Другие вопросы по теме