Question

我使用Twitter Bootstrap和JS制作一种滑动侧边栏。当您单击＆＃34;切换＆＃34;时，选中的列包含＆＃34; col-lg-1＆＃34;扩展到＆＃34; col-lg-3＆＃34;和＆＃34; col-lg-10＆＃34;收缩到＆＃34; col-lg-8＆＃34; （使用jQueryUI＆＃39; s switchClass()）。对于show()和hide()的动画效果，我使用jQueryUI。但是在动画和列调整大小时#content闪烁的内容（在动画结束时消失并再次显示）。

HTML是：

<div class="row">
  <div class="col-lg-1" id="menu-1">
    <a href="#">Toggle</a>
    <ul>
      <li>
      ...
    </ul>
  </div>
  <div class="col-lg-1" id="menu-1">
    <a href="#">Toggle</a>
    <ul>
      <li>
      ...
    </ul>
  </div>
  <div class="col-lg-10" id="content">
    <p>Some text</p>
    <p>Some text</p>
    <p>Some text</p>
  </div>
</div>

Cleaned JS就像：

if ($col.hasClass('col-lg-3')){
  // hide on second click
  $col.switchClass('col-lg-3','col-lg-1');
  $content.switchClass('col-lg-8', 'col-lg-10');
}else{
  // open
  var $sibling = $bar.siblings('.col-lg-3');
  if($sibling.length == 1){
    // close sibling if it's open
    $sibling.switchClass('col-lg-3','col-lg-1');
  }
  $col.switchClass('col-lg-1','col-lg-3');
  $content.switchClass('col-lg-10', 'col-lg-8');
}

你能建议修复吗？或者推荐其他解决方案？

UPD ：

JSFiddle
浏览器：Firefox 27.0.1

调整相邻div的大小时消除闪烁

0 个答案: