从右到左用jquery滑动切换

Question

如何使用jquery制作迷你购物车切换？我在右上角有这个包包链接，当我点击它时，它会滑动隐藏的div包含迷你购物车信息，该信息将从右边（之前不可见）滑动到左边（点击后可见）然后覆盖页面其余部分的背景。忽略购物车内容，它将使用php，只需要使用jquery div幻灯片动画，

<div class="container">
<div id="pollSlider-button"></div>
<div class="left"></div>
<div class="right"><div class="pollSlider"></div></div>
</div>

$(document).ready(function()
{
   var overlay = $('<div id="overlay"> </div>');
  $('#pollSlider-button').click(function() {
    if($(this).css("margin-right") == "200px")
    {
        $('.pollSlider').animate({"margin-right": '-=200'});
        $('.right').css("position", 'relative');
        $('#pollSlider-button').animate({"margin-right": '-=200'});
        overlay.appendTo('.left')
    }
    else
    {
        $('.pollSlider').animate({"margin-right": '+=200'});
        $('#pollSlider-button').animate({"margin-right": '+=200'});
        $('.right').css("position", 'relative');
        overlay.appendTo('.left')
    }


  });
 });    

.pollSlider{
    position:fixed;
    height:100%;
    background:red;
    width:200px;
    right:0px;
    margin-right: -200px;
}
#pollSlider-button{
    position:fixed;
    width:100px;
    height:50px;
    right:0px;
    background:green;
    top:300px;
}
#overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    filter:alpha(opacity=50);
    -moz-opacity:0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
    z-index: 10000;
}
.container {
     width: 100%;
}
.left {
    width: 80%;
    float:left;
    height: 100%;
}
.right { 
    width: 20%;
    float: right;
    height: 100%;
}