jquery - 如何使用 jquery.transit 使侧边栏进入 View 并保持在顶部

Question

我正在使用 jquery.transit过渡以在单击按钮时将侧边栏移动到 View 中，我几乎让它工作，除了它出现在“leftpad”div 下而不是显示在它旁边。这可能是因为我必须在 css 中使用 position:relative 才能实现过渡。如果我使用固定位置，侧边栏根本不会出现，但“leftpad”元素会移动为其腾出空间。我不知道如何解决这个问题。

这是我的代码:

$('#openNav').click(function() {
  $("#leftpad").transition({'padding-left': "300px"},400);
  $("#contentArea").transition({'width':'95%','display':'inline-block'},400);
  $("#sidebar").transition({ x: '300px', y:'0px' });
  $("#openNav").hide();
});

 $('#closeNav').click(function() {
  $("#leftpad").transition({'padding-left': "0px"},400)
  $("#contentArea").transition({'width':'70%','display':'block'},400);
  $("#sidebar").transition({ x: '-300px', y: '0px' });
  $("#openNav").show();
});

这是CSS:

#leftpad{
    padding: 0;
    margin: 0;
}

#sidebar {
    height: 100%;
    width: 300px;
    position: relative;
    z-index: 1;
    top: 0;
    left: -300px;
    overflow: hidden;
    text-align: center;
}

这是 html:

<div id="leftpad">
<header role="banner" class="banner_image boxshadowM enclosure1" >
        <div class="gradient2">
            <button id="openNav"  class="button1 boxshadowM">&#9776;</button>
        <h1><strong id="sitetitle">Blockpress</strong></h1>
        <h2 id="tagline"></h2>
        </div>
  </header>
<div id="contentArea" class="boxshadowM enclosure2"></div>
</div>
 <div  id="sidebar" class="enclosure3">
   <button id="closeNav" class="button2">&times;</button>
     <nav>...</nav>
     <footer>...</footer>
</div>

Answer 1

解决这个问题很简单。首先，在 css 中，position 的值需要从 relative 更改为 fixed。接下来，#sidebar 转换中的运算符需要更改。 - 应该是 -=。正值也是如此。我删除了 y 值，因为它什么都不做。

请看下面的代码:

$('#openNav').click(function() {
  $("#sidebar").transition({ x: '+=300px' });
  $("#leftpad").transition({'padding-left': "300px"},400);
  $("#contentArea").transition({'width':'95%','display':'inline-block'},400);
  $("#openNav").hide();
});

$('#closeNav').click(function() {
  console.log('closenav');
  $("#sidebar").transition({ x :'-=300px' });
  $("#leftpad").transition({'padding-left': "0"},400)
  $("#contentArea").transition({'width':'70%','display':'block'},400);
  $("#openNav").show();
});