如何使用.animate使元素不被爬网

我正在学习使用jQuery中的.animate。我正在尝试做一些类似弹出菜单的事情。但当我尝试同时使用这两个动画元素时，它们会爬行。

全屏示例：http://jsfiddle.net/shapoval/cfr43/6/embedded/result/

代码示例：http://jsfiddle.net/shapoval/cfr43/6/

一点帮助是非常受欢迎的。

HTML:

<div class="header">Header</div>
    <div class="container">
      <div class="column txt">
        <h3>Example sidebar column</h3>
      </div>
      <div class="mycontainer txt">
        <div id="main">
          Hello, world!
        </div>
        <div id="menu">
          <button id="button-OK">Click!</button></br>
        </div>
      </div>
    </div>
<div class="footer">Footer</div>

咖啡脚本：

$(document).ready ->
  animationTime = 1000
  $("#button-OK").click ->
    x = $(".column").width()
    $(".column").animate
      left: "-=#{x}px"
      , animationTime, "linear", ->
        $(".column").animate
          left: "+=#{x}px"
          , animationTime, "linear"
    $(".mycontainer").animate
      width: "+=#{x-1}px"
      , animationTime, "linear", ->
        $(".mycontainer").animate
          width: "-=#{x-1}px"
          , animationTime, "linear"

SCSS:

$grayMediumLight: #eaeaea;
$blue: #1166ff;
$red: #bd362f;
$grayDark: #999999;
$redDark: #992415;
.header {
  background: $grayDark;
  text-align: center;
}
.footer {
  background: $grayDark;
  text-align: center;
}
.txt {
  vertical-align: middle;
  text-align: center;
  color: #FFF;
  font-size: 24px;
}
.container {
  position: relative;
  overflow: hidden;
  width: 85%;
  margin: 0 auto;
  background: $grayMediumLight;
}
.mycontainer {
  width: 70%;
  background: $red;
  position: relative;
  height: 200px;
  float: right;
  display: block;
  border-style: none; 
}
.column {
  position: relative;
  width: 30%;
  float: left;
  background: $blue;
  display: block;
  height: 200px;
  border-style: none; 
}
#main{
}
#menu{
  float: left;
  width: 100px;
  background: $redDark;
}

附言：对不起，我的英语不好。