JQuery animate () only works in second click

Question

I create a menu that appears after clicking on the link, and I'm trying to use jQuery animate (); to copy it, and not just appear.

The problem I am facing is that it only activates the sliding bit in the second attempt, although it seems to pause for 500 ms, as if it were.

I saw several other questions about this, but the answers are either "you have a specific error in your code" or "you need to switch or otherwise fake the animation when the page loads." I hope that my code will be error-free, and I don’t really want to use toggle to intercept to bypass the first animation without animation.

Presumably, this should work for the first time and every subsequent time, so my question is: how to make the animation work for the first time without fixing / breaking onload?

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 the 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

Answer 2

http://jsfiddle.net/desmo/05gu7bpr/5/

The show comes after the animation on the first click

I adjusted css and js

CSS

 #mover { background:rgba(47, 47, 47, 1); min-height: 100%; position: absolute; z-index: 2; right: 100%; overflow: hidden; width: 100%; } #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:

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