jQuery jQuery点击切换动画
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15367481/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery click toggle animation
提问by Micha?l van de Weerd
I'm trying to learn how to use jQuery, and I've stumbled upon a problem. First off, I will show you the part of the code that causes the problem.
我正在尝试学习如何使用 jQuery，但我偶然发现了一个问题。首先，我将向您展示导致问题的代码部分。
HTML
HTML
<div id="nav">
<div id="button"><p class="scroll" onclick="location.href='#ed';">Education</p></div>
<div id="button"><p class="scroll" onclick="location.href='#wxp';">Work Experience</p></div>
<div id="button"><p class="scroll" onclick="location.href='#oact';">Other Activities</p></div>
<div id="button"><p class="scroll" onclick="window.open('cv.pdf','mywindow');">View as PDF</p></div>
<div id="arrow_container"><div class="arrow" id="down"></div></div>
jQuery
jQuery
$(document).ready(function(){
$("#arrow_container").toggle(
function () {
$("#nav").animate({marginTop:"0px"}, 200);
}, function () {
$("#nav").animate({marginTop:"-100px"}, 200);
});
});
I want the div #nav, which is initially positioned partially outside of the screen, to move down when div #arrow_containeris clicked. Then when #arrow_containeris clicked again I want #navto move up, to its original position.
我希望 div#nav最初位于屏幕的一部分之外，当#arrow_container单击div 时向下移动。然后#arrow_container再次单击时，我想#nav向上移动到其原始位置。
At the moment, non of this happens. Can you tell me what the problem is and how I can fix it?
目前，没有这种情况发生。你能告诉我问题是什么以及我如何解决它吗？
EDIT: a jsfiddle with the code, including some css
EDIT 2: The problem seems to be solved. Also thanks to someone whose username I forgot and answer has been deleted, but he had some great tips! Thank you!
编辑 2：问题似乎已解决。还要感谢我忘记用户名并且答案已被删除的人，但他有一些很棒的提示！谢谢！
回答by tsuensiu
Try this:
尝试这个：
$("#arrow_container").click( function(event){
event.preventDefault();
if ( $(this).hasClass("isDown") ) {
$("#nav").stop().animate({marginTop:"-100px"}, 200);
} else {
$("#nav").stop().animate({marginTop:"0px"}, 200);
}
$(this).toggleClass("isDown");
return false;
});
回答by Timotheus Triebl
for me that didn't work to 100% i had to edit a stop() event before every animate. so:
对我来说 100% 不起作用，我必须在每个动画之前编辑 stop() 事件。所以：
$("#arrow_container").click( function(event){
event.preventDefault();
if ($(this).hasClass("isDown") ) {
$("#nav").stop().animate({marginTop:"0px"}, 200);
$(this).removeClass("isDown");
} else {
$("#nav").stop().animate({marginTop:"-100px"}, 200);
$(this).addClass("isDown");
}
return false;
});
