jQuery单击切换动画

问题描述

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

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.

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向上移动到其原始位置.

I want the div #nav, which is initially positioned partially outside of the screen, to move down when div #arrow_container is clicked. Then when #arrow_container is clicked again I want #nav to move up, to its original position.

此刻，这一切都没有发生.您能告诉我问题出在哪里以及如何解决吗?

At the moment, non of this happens. Can you tell me what the problem is and how I can fix it?

包含代码的jsfiddle，包括一些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!

推荐答案

尝试一下:

$("#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/

这篇关于jQuery单击切换动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！