javascript - 左列移动时以2列布局调整内容区域

我有2列的布局，左侧菜单的宽度固定，并且我遵循以下结构
如http://blog.html.it/layoutgala/LayoutGala24.html中所述。

在单击导航菜单时，我试图将其隐藏到某些像素。

导航菜单向左侧动画时，右侧内容如何自动调整自身？

JS

$("#navigation").on('click', function() {
  var $el = $(this), animateLeft;
  if(parseInt($el.css('margin-left')) === 0) {
    animateLeft = "-=180px";
  }else{
    animateLeft = "+=180px";
  }
  $(this).animate({
    marginLeft : animateLeft
  },500, function() {
    console.log("anim complete");
  });
});

演示-http://codepen.io/anon/pen/hCmKl

最佳答案

尝试这个：

$("#navigation").on('click', function() {
  var $el = $(this), animateLeft;
  if(parseInt($el.css('margin-left')) === 0) {
    animateLeft = "-=180px";
  }else{
    animateLeft = "+=180px";
  }
  $(this).animate({
      marginLeft : animateLeft
    },500, function() {
        console.log("anim complete");
    });
  $("#content").animate({
    marginLeft: animateLeft
  }, 500);
});

http://codepen.io/anon/pen/Ikgnm