jQuery animate()仅适用于第二次单击

Question

我正在创建一个单击链接后出现的菜单,我正在尝试使用jQuery animate(); 功能可以将其滑入而不是仅仅显示它.

我遇到的问题是,它似乎只是在第二次尝试时激活了滑动位,尽管它看起来似乎暂停了500ms.

我已经看到了一些关于此的其他问题,但答案是"你的代码中有一个特定的错误"或"你必须在页面加载时切换或以其他方式伪造动画".我希望我的代码没有错误,我真的不想使用切换黑客只是绕过第一个动画未显示.

据推测,这应该是第一次和随后的每一次工作,所以我的问题是:如何在没有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);
});

这是一个小提琴:http://jsfiddle.net/tymothytym/05gu7bpr/4/

谢谢!

Answer 1

将 CSS更改#mover为：

#mover {
    background:rgba(47, 47, 47, 1);
    min-height: 100%;
    position: absolute;
    z-index: 2;
    right: 100%;
    overflow: hidden;
    display: block;
    width: 100%;
}

演示版