jQuery的动画（）只能在第二次点击

我创建一个菜单，点击链接后出现，我试图使用jQuery animate（）;功能来滑动它，而不仅仅是让它出现。jQuery的动画（）只能在第二次点击

我遇到的问题是，它似乎只激活第二次尝试滑动位，虽然它似乎做了500毫秒的暂停，就好像它。

我已经看到了一堆关于此问题的其他问题，但答案是“您的代码中存在特定错误”或“您必须在页面加载时切换或以其他方式假装动画”。我希望我的代码没有错误，我并不真正热衷于使用切换黑客来绕过第一个动画未显示。

大概这应该是第一次&每隔一段时间，所以我的问题是：如何让动画第一次工作没有onload修复/黑客？

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/

谢谢！

来源

2014-10-30 tymothytym

+1。所有SO问题应该像这样形成。顺便说一句，你有没有考虑过使用CSS转换？这不能回答你的问题，但现在通常是我首选的基于浏览器的动画方法。 – 2014-10-30 17:12:59

我希望它只在点击上工作，所以JS似乎是要走的路，尽管我愿意接受任何解决方案，并且通常更喜欢CSS选项。什么是SO问题？ – tymothytym 2014-10-30 17:25:52

StackOverflow问题。我会在早上为你写CSS替代品。但基本上，你用你的jQuery切换一个类。一个班会有'正确的：0％;'而另一个班有正确的：100％'。现在（很明显），这会点击点击，但是你可以像这样定义转换：'transition：all 3s ease;'。 'all'意味着CSS属性的任何区别都会在可能的情况下生成动画，你可能只是'正确'，但我认为你可能想要玩弄它，所以留下'all'。注意：检查'-webkit '等价的过渡属性等 – 2014-10-30 18:05:36

变化#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

来源

2014-10-30 17:14:22 kei

和你所有的代码如：http：// jsfiddle。net/05gu7bpr/6/ – 2014-10-30 17:18:24

补给它。所以这是一个错误，在检查时需要更多的练习......花哨地把权利放在两次*呻吟*。 – tymothytym 2014-10-30 17:29:20

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

来源

2014-10-30 17:16:20 jean

jQuery的动画（）只能在第二次点击

回答

相关问题