左右滑动-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>