使用jquery點擊動起來一個div點擊

需要幫助通過點擊鏈接點擊和下拉動畫div。這裏是我下面的使用Javascript：使用jquery點擊動起來一個div點擊

$(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下面顯示與標識的的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 -->

來源

2014-02-26 Amechi

我認爲你可以將你的電話鏈接爲動畫。當你點擊一次時，你想讓它繼續往下走嗎？或者如果你點擊它，讓它以單向動畫的方式，再次點擊動畫的另一種方式。你可以使用CSS轉換來做到這一點，它可能會更容易。只需添加或刪除CSS類來設置動畫。 –

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

來源

2014-02-26 22:41:53 wizulus

好多了，但這仍然沒有做任何事情。請參閱http://jsfiddle.net/Ug6GM/2/。我不介意聽到Amechi爲了做這個工作而改變了什麼。 – jakealbaugh

在其他方面（見所有更改的代碼）：

如果你想使用top，你大概是想它表現得像它絕對定位一樣。要做到這一點，您需要一個圍繞#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。

來源

2014-02-26 22:54:00 jakealbaugh

使用jquery點擊動起來一個div點擊

回答

相關問題