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

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

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

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

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

为此，您将使用以下行：

$('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数据加载到另一个元素中并在底部显示！

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

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

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

1 个答案: