jQuery animate() funktioniert nur beim zweiten Klick

Question

Ich erstelle ein Menü, das nach einem Klick auf einen Link erscheint, und ich versuche, die jQuery animate(); Funktion, um es einzufügen, anstatt nur zu erscheinen.

Das Problem, das ich habe, ist, dass es scheint, nur das Gleitbit im zweiten Versuch zu aktivieren, obwohl es scheint, die 500ms Pause zu tun, als ob es wäre.

Ich habe eine Reihe anderer Fragen dazu gesehen, aber die Antworten lauten entweder "Sie haben einen bestimmten Fehler in Ihrem Code" oder "Sie müssen die Animation beim Laden der Seite umschalten oder anderweitig fälschen". Ich hoffe, dass mein Code fehlerfrei ist und ich bin nicht wirklich scharf darauf, einen Toggle-Hack zu verwenden, nur um die erste No-Show-Animation zu umgehen.

Vermutlich soll das erste mal funktionieren & jedes weitere Mal, so ist meine Frage: Wie bekomme ich die Animation zum ersten Mal ohne eine 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); 
}); 

Hier ist eine Geige: http://jsfiddle.net/tymothytym/05gu7bpr/4/

Danke!

Answer 1

ändern #mover CSS dazu:

#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/

Die Show passiert, nachdem die Animation auf dem ersten Klick

ich die CSS und die js korrigiert

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); 
});