我正在尝试学习如何使用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);
});
});
我希望最初位于屏幕外部的div #nav
在点击div #arrow_container
时向下移动。然后,当再次点击#arrow_container
时,我希望#nav
向上移动到原始位置。
目前,没有发生这种情况。你能告诉我问题是什么以及如何解决它吗?
编辑:a jsfiddle with the code, including some css
编辑2:问题似乎已经解决了。还要感谢那些我忘了并回答的用户名已被删除的人,但他有一些很棒的提示!谢谢!
答案 0 :(得分:15)
试试这个:
$("#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;
});
答案 1 :(得分:4)
对于我不能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;
});