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. raise half of the page(and its contents)

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

.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. increase the size of a div in the center for ajax content to be loaded.

为此，您将使用这一行:

$('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. lower the lower half of the page(and its contents)

这里类似的东西，只是在底部移动一点!通过添加边距，或者使用 position: absolute 并给出参数!