jQuery animate() only working on second click

Question

I'm creating a menu that appears after a click on a link, and I'm trying to use the jQuery animate(); function to slide it in rather than just having it appear.

The issue I'm having is that it only seems to activate the sliding bit on the second attempt, although it does seem to do the 500ms pause as though it were.

I've seen a bunch of other questions about this but the answers are either "you've got a specific error in your code" or "you have to toggle or otherwise fake the animation on page load". I'm hoping my code is error-free and I'm not really keen to use a toggle hack just to bypass the first animation no-show.

Presumably this is supposed to work first time & every subsequent time so my question is: How do I get the animation to work first time without an onload fix/hack?

HTML

<section id="mover">
  <div class="menu_Content">
    <div class="menu_close"> 
        <a href="#" id="closeMenu">close menu</a>
    </div>
     <h5><a href="/">[menu link]</a></h5>
     <h5><a href="/">[menu link]</a></h5>
     <h5><a href="/">[menu link]</a></h5>
     <h5><a href="/">[menu link]</a></h5>
     <h5><a href="/">[menu link]</a></h5>
     <h5><a href="/">[menu link]</a></h5>
     <h5><a href="/">[menu link]</a></h5>
  </div>
</section>
<div class="core home">
  <header>
    <div class="menu_link"> <a href="#" id="openMenu">[menu]</a></div>
  </header>
  <div class="content">
     <h1 class="big-head">[headline one]</h1>
     <p>[some content]</p>
  </div>
</div>

CSS

#mover {
    background:rgba(47, 47, 47, 1);
    min-height: 100%;
    position: absolute;
    z-index: 2;
    right: 100%;
    overflow: hidden;
    display: none;
    width: 100%;
    right: 0%;
}
#mover a {
    width: 100px;
    height: 60px;
    color: #fff;
    text-decoration: none;
    display: block;
    padding-top: 10px;
}
#mover .menu_close {
    width: 100px;
    height: 60px;
    background: #FF7466;
    color: #fff;
    text-align: center;
}

JS/jQuery

//menu open
jQuery('#openMenu').click(function (event) {
    event.preventDefault();
    jQuery('#mover')
        .animate({
        right: '0%'
    }, 500, function () {
        jQuery('#mover').show();
    });
});
//menu close
jQuery('#closeMenu').click(function (event) {
    event.preventDefault();
    jQuery('#mover').animate({
        right: '100%'
    }, 500);
});

Here is a fiddle: http://jsfiddle.net/tymothytym/05gu7bpr/4/

Thanks!

Answer 1

Change #mover CSS to this:

#mover {
    background:rgba(47, 47, 47, 1);
    min-height: 100%;
    position: absolute;
    z-index: 2;
    right: 100%;
    overflow: hidden;
    display: block;
    width: 100%;
}

DEMO