Jquery 从一个按钮发射两个滑入式div。

我需要用一个按钮触发两个滑入式div。我一直在玩我想要的结果像一个简单的窗帘。第一次单击时，“红色”窗帘向左滑出，“绿色”窗帘向右滑出。第二次单击时，“窗帘”将关闭

类似这样：

var $curtains = $('#red,#green')
$('button').toggle(function(){
  $curtains.animate({
    width:0
  })
},function(){
  $curtains.animate({
    width:'50%'
  })
})

和CSS：

#container {
  position:relative;
  width: 400px;
  height: 600px;
}
#red {
  width:50%;
  position:absolute;
  left:0;
  background:red;
}
#green {
  width:50%;
  position:absolute;
  right:0;
  background:green;
}

以及HTML：

<button>Click me</button>
<div id="container">
  <div id="red"></div>
  <div id="green"></div>
</div>

点击我

刚刚检查过。。。这个脚本应该可以做到这一点

function toggleDivs() {
    var $red = $("#red");
    var $green =$("#green");
       if ($green.position().left*1 == 200) {
            $red.animate({  left: "-400px"  });
            $green.animate({left: "400px"  });
    }
    else {
            $red.animate({  left: "-200px"  });
            $green.animate({left: "200px"  });
    }

}


$("button").bind("click", function() {
    toggleDivs();
});

---

绝对完美！非常感谢阿南莎。非常感谢你看这个。非常感谢。