Hice un div básico con un encabezado y un párrafo dentro y cuando realizo una animación de varios pasos, el cuadro falla hacia arriba y luego hacia abajo. Lo hace parecer muy glitchy y extraño. Puede ver mi error en https://jsfiddle.net/yajuy8qy/ . Código:
<div class="enlarge"> <h1 class="title">Welcome!</h1> <p>Zach</p> </div> <script> $(document).ready(function() { $(".enlarge").animate({minHeight: '500px'}, "slow"); $(".enlarge").animate({width: '80%'}, "slow"); }); </script> <style> .enlarge { height: 500px; width: 50%; background-color: #2098D1; align-items: center; align-content: center; border-radius: 15px; position: relative; margin: 10px auto; } </style>¡Gracias!
Parece que hay un problema con la propiedad de relleno predeterminada. Intente configurar el relleno en el div (incluso 1px aparece soluciona la falla).
.enlarge{ padding: 1px; }