jQuery एनिमेट() केवल दूसरे क्लिक पर काम कर रहा है

Question

मैं एक मेनू बना रहा हूं जो एक लिंक पर क्लिक के बाद दिखाई देता है, और मैं jQuery एनिमेट() का उपयोग करने की कोशिश कर रहा हूं; इसे प्रकट होने के बजाय इसे स्लाइड करने के लिए फ़ंक्शन करें।

मेरा मुद्दा यह है कि यह केवल दूसरे प्रयास पर स्लाइडिंग बिट को सक्रिय करने लगता है, हालांकि ऐसा लगता है कि यह 500ms विराम जैसा प्रतीत होता है।

मैंने इसके बारे में अन्य प्रश्नों का एक समूह देखा है लेकिन उत्तर या तो "आपके कोड में एक विशिष्ट त्रुटि है" या "आपको पृष्ठ लोड पर एनीमेशन को टॉगल करना या अन्यथा नकली करना है"। मुझे आशा है कि मेरा कोड त्रुटि मुक्त है और मैं वास्तव में पहले एनीमेशन नो-शो को बाईपास करने के लिए टॉगल हैक का उपयोग करने के लिए उत्सुक नहीं हूं।

संभवतः यह पहली बार & काम करने वाला माना जाता है, इसलिए मेरा प्रश्न है: मैं एनीमेशन फिक्स/हैक के बिना पहली बार एनीमेशन कैसे काम करूं?

एचटीएमएल

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

सीएसएस

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

जे एस/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); 
}); 

यहाँ एक बेला है: http://jsfiddle.net/tymothytym/05gu7bpr/4/

धन्यवाद!

Answer 1

बदलें #mover यह करने के लिए सीएसएस:

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

शो पहले क्लिक

मैं सीएसएस ठीक किया और जे एस पर एनीमेशन के बाद क्या

सीएसएस:

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

जे एस:

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