jquery - Menu transition while resizing -

the issue have given on following pen

http://codepen.io/dingo_d/pen/oxbyjw

i have working menu. in mobile width (<700px) , in normal browser (>1170px).

if refresh pen on sizes, , click on menu item, works fine. on either sizes.

however on resize, part of toggle function control animation not working should. code inside header_toggle() function

        $menu_toggle.on('click', function (e) {             if ($(window).width()<960) {                 $(this).toggleclass('mobile_open');                 if ($(this).hasclass('mobile_open')) {                     $navigation.fadein().animate({width: '70%'},250);                 } else{                     $navigation.animate({width: '0' },250).fadeout();                 }             } else{                 $(this).toggleclass('open');                 if ($(this).hasclass('open')) {                     $breadcrumbs_bar.toggle('slide', {direction: 'up'}, 250, function () {                         $navigation.toggle('slide', {direction: 'down'}, 250).css('display', 'inline-block');                     });                 } else {                     $navigation.toggle('slide', {direction: 'down'}, 250, function () {                         $breadcrumbs_bar.toggle('slide', {direction: 'up'}, 250).css('display', 'inline-block');                     });                 }             }             e.preventdefault();         }); 

it's on resize, when you're inside function, if statements not working time? workaround?

my biggest concern if on tablet, , flip it, , right in between resolutions, issue happen.

on sizes above 960 px animation happens slide , down, , class toggles open, below have fade , width animation, , class toggle mobile_open.

just doing css out of option, because slide , down animation css (using transform property) works if have overflow hidden container, if have drop down menu, overflow should visible.

on resize code:

$(window).on('resize',function(){     toggle_menu();     header_toggle();     if ($(window).width()>767) {         if ($main_header.has($navigation)) {             $navigation.detach().appendto('.menu_wrapper');         }     } else{         $navigation.detach().prependto('body');     }  }); 

the fiddle has jquery code.

i got finished writing menu similar trying do.

take @ codepen: http://codepen.io/anon/pen/yxzgyr

ismobile()

function check if window in mobile resolution.

setmenutype()

function add / remove class navbar on page load , when window resize.

windowresize()

i included settimeout function runs when window done resizing.

hopefully helps idea of how mobile / desktop navbar/menu.

$(document).ready(function() {    function ismobile() {     if (window.innerwidth < 767) {       return true;     }   }    setmenutype();         function setmenutype() {     if (ismobile()) {       $('nav').removeclass('desktop');       $('nav').addclass('mobile');     } else {       $('nav').removeclass('mobile');       $('nav').addclass('desktop');     }   }    var resizeid;   $(window).resize(function() {     cleartimeout(resizeid);     resizeid = settimeout(setmenutype(), 500);   }); });