Javascript 左右滑动-jquery

假设我有一个屏幕宽度的任务列表。当我点击其中一个时，它会向左滑动，占据屏幕的50%，同时，它会从屏幕的右侧滑动一些关于点击任务的详细信息。这张“详细信息卡”也将占据屏幕的一半。总而言之，我想模拟一下效果。所以我写了这篇文章，但它并不顺利。有人能帮忙吗

给出适当的宽度、位置

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<STYLE>
#content {
    background-color:#6688ff;
    position:absolute;
    width:100px;
    height:100px;
    padding:3px;
    margin-top:5px;
    left: 100px;
}
</STYLE>
<input type="button" id="left" value="Left"/>
<input type="button" id="right" value="Right"/>
<div id="content">Move</div>
  <script>
$(document).ready(function(){
$("#right").click(function() {
    $("#content").animate(
            {"left": "+=50px"},
            "slow");
});
$("#left").click(function() {
    $("#content").animate(
            {"left": "-=50px"},
            "slow");
});
        });     
</script>

#内容{
背景色：#6688ff；
位置：绝对位置；
宽度：100px；
高度：100px；
填充：3倍；
边缘顶部：5px；
左：100px；
}
移动
$（文档）.ready（函数（）{
$（“#右”）。单击（函数（）{
$（“#内容”）。制作动画(
{“左”：“+=50px”}，
“慢”）；
});
$（“#左”）。单击（函数（）{
$（“#内容”）。制作动画(
{“左”：“-=50px”}，
“慢”）；
});
});