jQuery单击切换动画

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

HTML

 
Education
 
Work Experience
 
Other Activities
 
View as PDF
 
 

jQuery的

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

我希望div #nav （最初位于屏幕外部）在单击div #arrow_container时向下移动。 然后当再次单击#nav时，我希望#nav向上移动到其原始位置。

目前，没有发生这种情况。 你能告诉我问题是什么以及如何解决它吗？

编辑： 一个jsfiddle的代码，包括一些CSS

编辑2：问题似乎得到解决。 还要感谢我忘记并回答的用户名已被删除，但他有一些很棒的提示！ 谢谢！

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/

Answer 2

对于我不能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; });