Javascript 在单击时使用Jquery设置div的上下动画

需要帮助通过相同的单击链接设置上下div的动画。下面是我的Javascript：

 $(function() {

        // global functions
        var dash = $('#Dashboard');
        var dashBtn = $('#dashClick');
        var state = dash.css({
            "top":600
        });


        var clicked = dashBtn.click(function(e) {
          e.preventDefault();

          if(clicked) {
            dash.animate({"top":0});
          } 

          if(state > 0 && clicked) {
            dash.animate({"top":600});
          }
        });

        //make it height of document
        dash.height($(document).height()); 
    });

下面是我的HtML，显示了对带有ID的javascript的引用：

<a id="dashClick" href="#">Dashboard</a>
<div id="Dashboard"> 
          <h2 class="dashTitle">Project Information</h2>
          <div class="dashInnerAdd">
            <p>
       Project name: CSS3 Effects N' Stuff 
       My github is: https://github.com/Amechi101/css3effects
            </p> 
          </div> 
        </div>
      </main>  <!-- end grid main-->
    </div> 

   <!--end wrap -->

项目信息

项目名称：CSS3特效N'Stuff
我的github是：https://github.com/Amechi101/css3effects

主javascript只执行一次。您需要从单击处理程序中跟踪状态。试试这个：

$(function() {

    // global functions
    var dash = $('#Dashboard');
    var dashBtn = $('#dashClick');
    var state = true;


    dashBtn.click(function(e) {
      state = !state;
      e.preventDefault();

      if(state) {
        dash.animate({"top":20});
      } 

      if(!state) {
        dash.animate({"top":600});
      }
    });

    //make it height of document
    dash.height($(document).height()); 
});

除其他事项外（有关所有更改，请参见代码）：

如果要使用

top

，您可能希望它的行为与绝对定位一样。要做到这一点，您需要在

#仪表板

周围安装一个相对定位的容器。另外，javascript动画需要px值<代码>“顶部”：600应该是

顶部：“600px”

html:

还有一些css：

.container {
    position: relative;
}
#Dashboard {
    position: absolute;
    top: 0;
}

小提琴：

---

如果不需要绝对定位，只需将

top

更改为

marginTop

，就可以去掉

容器

包装器以及该小提琴中的所有css。

我认为您可以将调用链接到动画中。当你点击一次时，你想让它先升后降吗？或者，如果单击它使其以一种方式设置动画，请再次单击以另一种方式设置动画。您可以使用CSS转换来实现这一点，这可能会更容易。只需添加或删除CSS类即可制作动画。效果更好，但这仍然没有任何作用。看见我不介意听到阿梅奇为了实现这一目标还做了哪些改变。

$(function() {

    // global functions
    var dash = $('#Dashboard');
    var dashBtn = $('#dashClick');
    var clicked = false;

    dashBtn.click(function(e) {
      e.preventDefault();

      if(clicked === true) {
        clicked = false;
        dash.animate({top:"0px"});
      } else {
        clicked = true;
        dash.animate({top:"600px"});
      }
    });

    //make it height of document
    dash.height($(document).height()); 
});

.container {
    position: relative;
}
#Dashboard {
    position: absolute;
    top: 0;
}