jQueryを利用してクリックでdivを引っ張りだす

表示サンプルはこちら。右側のグレイのブロックをクリックすることでdivを引っ張りだします。

CSS

body {
    overflow-x: hidden;
}
#slideout {
    background: #EEE;
    position: absolute;
    width: 260px;
    height: 40px;
    top: 45%;
    right:-280px;
    padding: 20px;
}
    
#clickme {
    position: absolute;
    top: 0; left: 0;
    height: 80px;
    width: 20px;
    background: #CCC;
        cursor: pointer;
}

#slidecontent {
    float:left;
}

jQuery

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
    $("#clickme").toggle(function () {
        $(this).parent().animate({right:'0px'}, {queue: false, duration: 500});
    }, function () {
        $(this).parent().animate({right:'-280px'}, {queue: false, duration: 500});
    });
});
</script>

HTML

<div id="slideout">
    <div id="slidecontent">
       引っ張りだされた中身
    </div>
    <div id="clickme"></div>
</div>

参考：Pull out div from right of screen