lo que quiero hacer es
aumente el ancho del div sobre el que se desplaza y disminuya igualmente el ancho de los otros 3 divs.
Entonces, si se pasa el cursor sobre "div1" , entonces el ancho de "div1" debe ser "40%"
y
los otros 3 anchos de div irían a "20%" , lo que equivaldría a 100%
Esto funciona con el código que tengo, pero no es fluido y cuando paso el mouse rápidamente sobre varios divs, todo se vuelve loco. es muy buggy
¿Qué estoy haciendo mal?
Enlace de lo que estoy tratando de hacer : https://constructlar.atakansaracoglu.com/
Mi HTML:
<div class="container"> <div class="div1"> </div><div class="div2"> </div><div class="div3"> </div><div class="div4"> </div> </div>Mi CSS:
.container div { position: relative; display: inline-block; width: 25%; }Mi guión:
$(document).ready(function(){ $('.container div').hover(function(){ let $this = $(this); $this.siblings().animate({ 'width' : '19%' },200); $this.delay(200).animate({ 'width' :'40%' },300); }); });El uso de CSS y la propiedad de transition en lugar de jQuery hace que la página sea más fluida.
.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>