點擊容器內容下載，將內容加載到空間顯示Jquery

Question

我有一個容器充滿了內容。我試圖點擊一個按鈕，並推動所有的內容向下，說700px。一旦內容被推下，一個新的頁面加載到現在顯示的空間中，因爲內容被壓下。我也想要推動相同的按鈕來反向播放動畫，在卸載新加載的內容時推送內容。

我會如何做到這一點與jQuery？

Answer 1

看的jQuery效果和操控API

http://api.jquery.com/category/effects/

http://api.jquery.com/category/manipulation/

這些步驟應該足夠

1. 插入一個空的DIV在你的當前內容DIV。
2. 使用CSS或者移動內容DIV下來（通過添加上邊距），或者加入了一種自下而上保證金的空DIV
3. 與內容
4. 填寫您的新DIV如果你想扭轉這種局面，只是刪除保證金你添加了。

Answer 2

<button id="showHideTopContent">Show Hide Content</button> 

<div id="container"> 
    <div id="topContent" style="display:none;"> 
     This is top content 
     <hr /> 
    </div> 
    <div id="topContent" style="display:none;"> 
     This is bottom content. 
    </div>   
</div> 

<script type="text/javascript"> 
    $(function() { 
     $("#showHideTopContent").click(toggleTopContent); 
    }); 

    function toggleTopContent() { 
     var topContent = $("#topContent"); 
     var bottomContent = $("#bottomContent"); 

     if(!topContent.is(":hidden")) { 
     topContent.hide(); 
     bottomContent.slideUp("slow"); 
     } else { 
     // if you want the content to come from AJAX or so do it here 
     //  .... 
     // If you do so, the topContent div should remain there, but empty. 

     $("#topContent").slideDown("slow"); 
     } 
    } 
</script>