JS滑动toogle侧边栏并展开内容div

Question

我想滑出我的两个侧边栏并扩展我的中间内容div的宽度，但同时再次点击我想将其恢复原状。

到目前为止我尝试了什么

$('.headbar').click(function () {
    $(".leftside").animate({width: 'toggle'});
    $( ".rightside" ).animate({
        width: "toggle"
    }, 300, function() {
        $(".content").animate({width: '1200px'});
    });
});

我的问题

• 动画开始时头条闪烁（但猜猜它的CSS错误）

• 内容未切换回原始

我的理解概念

Answer 1

我会使用jQuery切换的CSS类转换效果而不是使用jQuery animate函数来解决这个问题。

工作演示：

＆＃13;

＆＃13;

$(document).ready(function() {

  $('body').on('click', '.headbar', function(){
  	$('body').toggleClass('expanded');
  });
  
});

＆＃13;

.headbar {
  width: 100%;
  background: #303030;
  background-repeat: repeat;
  background-size: 38px 133px;
  height: 40px;
  background-position: 0px 39px;
  box-shadow: 0px 1px 5px;
  position: fixed;
  z-index: 1000;
  margin-top: -40px;
}

.leftside {
  position: fixed;
  left: 2%;
  top: 100px;
  height: 500px;
  width: 13%;
  background-color: rgba(123, 123, 123, 0.95);
}

.rightside {
  position: fixed;
  right: 2%;
  top: 100px;
  height: 500px;
  width: 13%;
  background-color: rgba(123, 123, 123, 0.95);
}

.scrollable {
  position: relative;
  top: 20px;
  min-height: 700px;
  width: 70%;
  margin: 0 auto;
  box-shadow: 0px 1px 5px;
  background: white;
}

/* ===================== */
/* expanded transition
/* ===================== */

.leftside, .rightside, .scrollable {
  transition:0.3s;
}

body.expanded .scrollable {
  width:100%;
}

body.expanded .leftside {
  left: -100%;
}

body.expanded .rightside {
  right: -100%;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="headbar"></div>
<div class="leftside"></div>
<div class="rightside"></div>
<div class="scrollable"></div>

＆＃13;

＆＃13;

＆＃13;

jsFiddle