jQuery点击切换动画

Question

我正在尝试学习如何使用jQuery，但我遇到了一个问题。首先，我将向您展示导致问题的代码部分。

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

$(document).ready(function(){
$("#arrow_container").toggle(
  function () {
    $("#nav").animate({marginTop:"0px"}, 200);
      }, function () {
    $("#nav").animate({marginTop:"-100px"}, 200);
  });
});

我想让最初部分位于屏幕外的

#nav

在单击

#arrow_container

时向下移动。然后，当再次单击

#arrow_container

时，我希望

#nav

向上移动，回到其原始位置。

目前，这些都没有发生。您能告诉我问题在哪里以及如何解决它吗？

编辑：带有代码和一些CSS的jsfiddle 编辑2：问题似乎已经解决。还要感谢某个用户名我忘记了的人，他提供了一些很好的提示！谢谢！

- Michaël van de Weerd

---

你可以尝试在jsfiddle中重现你的问题，或者提供一些CSS或其他东西，以便我们看到你是如何定位#nav的？ - idrumgood

如果你正在开始学习jQuery，我建议不要使用toggle，因为它已经不包含在最新版本的jQuery中了。 - dev

@A.V 不是的，1.8版本已经被弃用了，从1.9版本开始就不再包含它了。http://api.jquery.com/toggle-event/ - dev

这并不完全正确，使用.toggle()有两种不同的实现方式，toggle-event已被弃用，而标准的toggle仍然得到充分支持。 - Simon

@idrumgood，我已经在主贴中添加了一个jsfiddle，希望它能够澄清事情。 - Michaël van de Weerd

Answer 1

试一下这个：

$("#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;
});

http://jsfiddle.net/us6sohyg/5/

- tsuensiu

---

您可以在if语句之后使用toggleClass('isDown')来消除添加和删除类的冗余。 - Ben Sewards

@BenSewards 谢谢，我更新了我的代码。还加入了Timotheus Triebl的建议。 - tsuensiu

Answer 2

对于我来说，这并没有完全起作用，我不得不在每个动画之前编辑一个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;
});

- Timotheus0106