左右滑動-jQuery

Question

假設我有一個任務列表，占用屏幕的寬度。 當我單擊其中一個時，它會向左滑動以占據屏幕顯示的50％，同時，它也會從屏幕的右側滑動與單擊的任務有關的一些詳細信息。 該“明細卡”也將占據屏幕的一半。 總而言之，我想模仿wunderlist 。 因此，我寫了這個小提琴 ，但是工作並不順利。 有人可以幫忙嗎？

Answer 1

給出適當的寬度，位置。

<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>