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

Question

我的页面上有一个网格布局，显示 li 内部的照片，希望在单击项目时对其进行动画处理以帮助，以显示将要显示的隐藏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

a. 抬高页面的一半（及其内容）

当单击按钮时

，我将假设所有这些动画将在单击按钮时执行！所以

.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..
  })
}

b. 增加中心中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并给出参数！