Question

我有一个装满内容的容器。我试图点击一个按钮，向下推所有内容，比如700px。一旦内容被推下，新页面就会加载到现在显示的空间中，因为内容被推下。我也想按相同的按钮反向播放动画，在卸载新加载的内容时推送内容。

我如何用jquery做到这一点？

Answer 1

查看jquery效果和操作API

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

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

这些步骤应该足够了

在当前内容DIV上插入空DIV。
使用CSS将内容DIV向下移动（通过添加上边距）或向空DIV添加下边距
使用内容填充新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>

在点击时将容器中的内容推下来，将内容加载到空间中显示Jquery

2 个答案: