Nota: este css en el fragmento no es exactamente igual a mi configuración (he corregido div en el cuerpo), pero por lo demás tiene el mismo efecto. Tengo div con ancho automático (texto adentro), que se abre desde la izquierda. Quiero cerrarlo de modo que se anime a la izquierda en todo su ancho menos 50 px. Esto funciona bien cuando el ancho de la pantalla es mayor que el ancho del elemento, pero cuando es más pequeño, mi elemento ya está aplastado, por lo que cuando hago el cálculo al hacer clic en el botón, el ancho no es correcto y cuando animo, no llega a deseado posición (porque se expande a su ancho natural a medida que obtiene más espacio hacia la izquierda).
¿Cómo puedo solucionar esto?
var b = $('.b') document.querySelector('#toggle').addEventListener('click', function() { var w = b.outerWidth(true), pos = w - 50 console.log(w) b.stop().animate({ 'left': -pos + 'px' }, { duration: 350 }); }) .a { border: 1px solid #333; width: 200px; position: relative; } .b { background: #ddd; max-width: 300px; padding: 50px; text-align: center; position: absolute; } #toggle { position: absolute; left: 400px; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="a"> <div class="b"> <div class="t">Lorem ipsum dolor sit amet</div> <div class="t">Ut laoreet hendrerit mi.</div> <div class="t">Lorem ipsum dolor sit amet</div> </div> </div> <a href="#" id="toggle">toggle</a>transform , translate y haga la transition para la animación deseada<button type="button"> si realmente necesita un botón. Los anclas son para otra cosa (Navegación). const EL = (sel, par) => (par||document).querySelector(sel); EL("#toggle").addEventListener("click", () => { EL("#menu").classList.toggle("is-open"); }); /* QuickReset */ * { margin: 0; box-sizing: border-box; } #toggle { position: fixed; right: 0; padding: 1rem; /* hopefully you know how to style a Button */ } #menu { position: fixed; padding: 30px; width: calc(100vw - 100px); /* or whatever you want, does not matters */ height: 100vh; background: gold; transition: transform 0.5s; /* transition property and duration */ transform: translateX(-100%); /* -100% of self-width (hidden) */ } #menu.is-open { transform: translateX(0%); /* (visible) */ } <div id="menu">I am something that actually toggles</div> <button type="button" id="toggle">Toggle</button>