Estoy tratando de crear un menú responsivo con css y jquery para lo cual tengo el siguiente código: funciona muy bien, el problema es que al darle la vuelta al dispositivo móvil y colocarlo en posición horizontal y después en vertical de nuevo, el menú se despliega muy lentamente y se lo vuelvo a hacer se demora muchos mas, a que se debe esto y como podría corregirlo, gracias por la ayuda.
$(document).ready(function(){
var window_width = $(window).width();
function mobileMenu(){
if(window_width <= 768){
//console.log(window_width);
$("#btn-menu").click(function(){
$("#mobile-menu").animate({"margin-left":"0"},400);
$(this).hide();
$("#btn-close-menu").show();
});
$("#btn-close-menu").click(function(){
$("#mobile-menu").animate({"margin-left":"-100%"},400);
$(this).hide();
$("#btn-menu").show();
});
$("#mobile-menu li a").click(function(){
$(this).parent().parent().animate({"margin-left":"-100%"},400);
$("#btn-close-menu").hide();
$("#btn-menu").show();
});
}
}
mobileMenu();
$(window).resize(function(){
var window_width = $(window).width();
if(window_width > 768){
$("#btn-menu").hide();
$("#mobile-menu li a").click(function(){
$("#btn-menu").hide();
$("#btn-close-menu").hide();
});
}
if(window_width <= 768){
$("#btn-menu").show();
$("#btn-close-menu").hide();
mobileMenu();
}
});
});