jquery - jQuery 动画将页面分成两半并显示一个 div

Question

我的页面上有一个网格布局，显示 li's 内的照片，希望在单击项目时对其进行动画处理，以显示隐藏的 div 内的内容，该内容将被显示。我想：

a. raise half of the page(and its contents)
b. increase the size of a div in the center for ajax content to be loaded.
c. lower the lower half of the page(and its contents)

代码笔（测试）：http ://codepen.io/anon/pen/yktvD

Answer 1

一个。提升页面的一半（及其内容）

当一个按钮被点击时，我会假设所有这些动画都会在点击一个按钮时执行！所以

.element {
  margin: 0; // on load no margins..
}

$('button').click(function () { // start the jquery animation..
  $('.element').css({ // alter the css properties..
      margin: '0 0 50% 0' // change the margin..
  })
}

湾。增加中心 div 的大小以加载要加载的 ajax 内容。

为此，您将使用此行：

$('element').css({
  height: 'addmoreheight',
  /* if more are required! */
})

现在这样做：

$('button').click(function () { // you can change the event..
   /* and at the same time, load the ajax content */
   $('otherelement').load('page_url'); // load the page content in element
   // or this one
   $.ajax({ // start the ajax request; alternate to the load
     url: 'page_url', // url to the page
     success: function (data) { // catch the response on success
       $('otherelement').html(data); // write the response
     }
   })
}

这是如何将底部边距添加到元素，并在另一个元素中加载 ajax 数据并将其显示在底部的示例！

C。降低页面的下半部分（及其内容）

类似的东西，只是在底部移动一点！通过添加边距，或通过使用position: absolute和提供参数！