Question

我想将HTML页面拆分50％。如果单击左侧，则应向上滑动至90％。对于右侧也是如此。

我看了一些网站，但不知何故无法理解如何做到这一点 http://www.learningjquery.com/2009/02/slide-elements-in-different-directions/

Answer 1

这可以通过让css类具有您想要的宽度来实现，例如：

.half-page{
    width: 50%;
}

.expanded{
    width: 90%;
}
.collapsed{
    width: 10%;
}

最初为每个窗格提供半页类，然后在单击窗格时向任一窗格添加单击事件，以向窗格提供展开的类，另一个窗格为折叠的类。（有多种方法可以完成这项工作）

这不是一个广泛的解决方案，但是可以为您自己进行研究和学习提供正确的方向。

Answer 2

HTML

<div class="main">
  <div class="left pane">
  </div>
  <div class="right pane">
  </div>
</div>

CSS

.main 
{
  width : 960px;
}

.pane
{
  width : 50%;
  height : 500px;
  float:left;
}

.pane.right
{
  float : right;
}

JS

$(".pane").click(function()
{
  var ele = $(this);

  $(".pane").animate({
    width : 50%
  },
  3000,
  function()
  {
      ele.animate({
        width : 90%
     })    
  });
});

这只是一个让你开始的例子

如果右侧窗格在屏幕外显示，那么您可以设置margin-left css属性的动画

jQuery在spitted页面上向右滑动

2 个答案: