Tengo este jsfiddle :
$('.btn').click(function() { if ($('nav').hasClass('open')) { $('nav').removeClass('open'); $('.hide').animate({ width: '508px' }); } else { $('nav').addClass('open'); $('.hide').animate({ width: 'toggle' }); } })donde estoy tratando de obtener una barra de navegación lateral para mostrar íconos y luego cuando se hace clic en el botón para animar para obtener un ancho específico.
Si bien la alternancia funciona y obtiene el ancho deseado, no está animado.
¿Algunas ideas?
Considera lo siguiente.
https://jsfiddle.net/Twisty/ck7y19rz/6/
JavaScript
$('.btn').click(function(event) { $("nav").toggleClass("open"); if ($("nav").hasClass("open")) { $(".hide").show().animate({ width: "580px" }); } else { $(".hide").animate({ width: "0px" }, function() { $(".hide").hide(); }); } }); Esto es en gran medida solo un código limpio. Como se comentó, cuando vuelve a animar al tamaño original, debe usar un valor de Ancho, no una palabra clave, como auto . También agregué .show() y .hide() para garantizar que el estado del elemento vuelva al estado visible esperado.