javascript - jQuery animate() only working on second click -

javascript - jQuery animate() only working on second click -

i'm creating menu appears after click on link, , i'm trying utilize jquery animate(); function slide in rather having appear.

the issue i'm having seems activate sliding bit on sec attempt, although seem 500ms pause though were.

i've seen bunch of other questions answers either "you've got specific error in code" or "you have toggle or otherwise false animation on page load". i'm hoping code error-free , i'm not keen utilize toggle hack bypass first animation no-show.

presumably supposed work first time & every subsequent time question is: how animation work first time without 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 { 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 fiddle: http://jsfiddle.net/tymothytym/05gu7bpr/4/

thanks!

change #mover css 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

javascript jquery animation