I have this jsfiddle:
$('.btn').click(function() {
if ($('nav').hasClass('open')) {
$('nav').removeClass('open');
$('.hide').animate({
width: '508px'
});
} else {
$('nav').addClass('open');
$('.hide').animate({
width: 'toggle'
});
}
})
where I'm trying to get a side navbar to just show icons then when the button is clicked to animate to get a specific width.
While the toggling works and it's getting the desired width, it's not animated.
Any ideas?
Consider the following.
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();
});
}
});
This is largely just cleaned up code. As was commented, when you animate back to the original size, it must use a Width value, not a keyword, like auto. I also added .show() and .hide() to ensure the state of the element is returned to the expected visible state.