單擊時使用Jquery上下動畫div

Question

在通過同一點擊鏈接將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 -->

Answer 1

除其他事項外（請參閱代碼以了解所有更改）：

如果要使用top ，則可能希望它的行為類似於絕對定位。 為此，您需要在#Dashboard周圍具有相對位置的#Dashboard 。 另外，您的javascript動畫需要px值。 "top":600應該真的是top:"600px" 。

HTML：

<a id="dashClick" href="#">Dashboard</a>
<div class="container">
    <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> 
</div>

JS：

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

和一些CSS：

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

小提琴： http : //jsfiddle.net/SQK78/2/

如果你並不需要絕對定位，你可以改變top到marginTop ，你可以擺脫的container包裝，以及所有在小提琴的CSS。

Answer 2

您的主要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()); 
});