左右滑动-jQuery

Question

Suppose I have a list of tasks taking the width of the screen. When I click on one of them, that it slides to the left to occupy the 50% of the with of the screen, and that, at the same time, slides from the right of the screen some details about the clicked task. This 'detail card' will take the half of the screen too. To summarize, I want to mimic the wunderlist effect. So I wrote this fiddle , but it is not working smoothly. Could some one help ?

Answer 1

Give appropriate width,position.

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