javascript - Slide out element to right, then back in from left -

consider following piece of html:

<div id="outer">     <div id="inner">         <p id="content">             content         </p>     </div> </div> 

i can make #inner slide out right screen using following jquery:

        $("#slide").animate(             {                 'marginleft':'100%'             },400,             function(){                 $(this).slideup('fast');                  $(this).css("margin-right","100%");                 $(this).css("margin-left","0");             }         ); 

however, how can make same element, new content (from ajax response), slide in from left?

i thinking resetting margins (from margin-left:100% margin-left:0; margin-right:100%) while out of view , use animation slide in left:

        $("#slide").animate(             {                 'marginright':'0'             },400,             function(){                 $(this).slidedown('fast');             }         ); 

this slides view, not left of screen. ideas? got .slideup() different stackexchange question don't know why it's needed horizontal slide.

simply reset margin using .css() method:

$(function() {    $("#outer").click(function() {      $(this).animate({        'marginleft': '100%',        'opacity': 0      }, 200, function() {        //==================================        //call synchronous ajax here or move block         //to ajax done callback function          //some ajax change        $(this).css({          "background": "blue"        }).text("came new content");          $(this).css({          'marginleft': '-100%'        });        $(this).animate({          'marginleft': '0',          'opacity': 1        }, 200);        //=================================      });    });  });

#outer {    width: 100px;    height: 100px;    display: block;    background: red;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div id="outer">    <div id="inner">      <p id="content">click me</p>    </div>  </div>