首次点击时如何更改我的jquery脚本以动画移动菜单？

Question

i have the following mobile menu code i have been using for a while. it works fine. i have an animation via css added so when the menu button is clicked it adds an animation for a smooth scroll - however i am noticing it does not work on the very fist click - all clicks after the first does work. also if you see something gross in my jquery code do let me know, i am new to jquery and trying to learn by doing.

any help, or insight into something i am over looking, trying to resolve this would be greatly appreciated.

jQuery(function() {
    //show the menu when button is clicked
    jQuery('#menu_btn').click(function() {
        if(jQuery('#menu').is(':visible')) {
            jQuery('#menu').animate({ left: '-100%' }, 'slow', function () {
                jQuery("#menu").css('display', 'none');
                jQuery('#menu_close').css('display', 'none');
            });
        } else {
            jQuery("#menu").css('display', 'block');
            jQuery('#menu').animate({ left: '0' }, 'slow', function(){
                jQuery('#menu_close').css('display', 'block');
            });
        }
    });

    //close menu when X button is clicked
    jQuery('#menu_close').click(function() {
        jQuery('#menu').animate({ left: '-100%' }, 'slow', function () {
            jQuery("#menu").css('display', 'none');
        });
    });

    callOnResize();
});

jQuery(window).resize( function(){
    callOnResize();
});

function callOnResize() {
    var winwidth = jQuery(window).width();
    if (winwidth < 760) {
        jQuery( '#menu' ).css({ display: 'none' });
        jQuery('#menu').animate({ left: '0' }, 'slow');
    } else if (winwidth >= 760) {
        jQuery( '#menu' ).css({ display: 'block' });
    }
}

the html of the menu is a very simple ul li view being output by wordpress

<div id="menu">
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</div>

Answer 1

Elements are considered visible if they consume space in the document. Visible elements have a width or height that is greater than zero.

Your menu div "#menu" should not be displayed by default "display:none".

The script should be something like this:

jQuery('#menu_btn').click(function() {

        if(jQuery('#menu').is(':hidden')) {
            jQuery("#menu").css('display', 'block');
            jQuery('#menu').animate({ left: '0' }, 'slow', function(){
               jQuery('#menu_close').css('display', 'block');
            });
     });

        } else {

            jQuery('#menu').animate({ left: '-100%' }, 'slow', function () {
                jQuery("#menu").css('display', 'none');
                jQuery('#menu_close').css('display', 'none'); 
        }
    });