jQuery animate() chỉ hoạt động trên nhấp chuột thứ hai

Question

Tôi đang tạo một menu xuất hiện sau khi nhấp vào liên kết và tôi đang cố gắng sử dụng jQuery animate(); để trượt nó thay vì chỉ xuất hiện.

Sự cố tôi gặp phải là dường như nó chỉ kích hoạt bit trượt trên lần thử thứ hai, mặc dù dường như nó có vẻ tạm dừng 500ms như thể nó đã xảy ra.

Tôi đã nhìn thấy một loạt các câu hỏi khác về vấn đề này nhưng câu trả lời là "bạn có lỗi cụ thể trong mã" hoặc "bạn phải chuyển đổi hoặc giả mạo hoạt ảnh khi tải trang". Tôi hy vọng mã của tôi là không có lỗi và tôi không thực sự quan tâm để sử dụng một hack chuyển đổi chỉ để bỏ qua các hoạt hình đầu tiên no-show.

Có lẽ điều này là nghĩa vụ phải làm việc lần đầu tiên & mỗi lần tiếp theo vì vậy câu hỏi của tôi là: Làm cách nào để hoạt ảnh hoạt động lần đầu mà không cần sửa chữa/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); 
}); 

Đây là một fiddle: http://jsfiddle.net/tymothytym/05gu7bpr/4/

Cảm ơn!

Answer 1

Thay đổi #mover CSS như sau:

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

Chương trình xảy ra sau khi các hình ảnh động trên nhấp chuột đầu tiên

tôi sửa css và 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); 
});