Question

我创建了一个单击链接后出现的菜单，我尝试使用jQuery animate（）;功能可以将其滑入而不是仅仅显示它。

我遇到的问题是，它似乎只是在第二次尝试时激活滑动位，尽管它似乎确实暂停了500ms。

我已经看到了很多关于此问题的其他问题，但答案是＆＃34;您的代码中出现了特定错误＆＃34;或者＆＃34;你必须在页面加载时切换或以其他方式伪造动画＆＃34;。我希望我的代码没有错误，而且我真的不想使用切换黑客只是为了绕过第一个没有出现的动画。

据推测，这应该是第一次工作＆amp;以后的每一次所以我的问题是：如何在没有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

将#mover CSS更改为：

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

该节目在第一次点击动画后发生

我纠正了css和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);
});

jQuery animate（）仅适用于第二次单击

2 个答案: