javascript - 向右滑出元素，然后从左侧滑回

Question

考虑以下 HTML 片段:

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

我可以使用以下 jQuery 使 #inner 从屏幕上向右滑动:

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

但是，我怎样才能使具有新内容(来自 AJAX 响应)的相同元素从左侧滑回？

我正在考虑重置边距(从 margin-left:100% 到 margin-left:0; margin-right:100%) View 然后使用动画将其从左侧滑入:

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

这会将其滑回 View 中，但不会从屏幕左侧滑出。有任何想法吗？我从另一个 StackExchange 问题中得到了 .slideUp()，但不知道为什么水平滑动需要它。

Answer 1

使用 .css() 方法简单地重置边距:

$(function() {
  $("#outer").click(function() {
    $(this).animate({
      'marginLeft': '100%',
      'opacity': 0
    }, 200, function() {
      //==================================
      //call synchronous ajax here or move this block 
      //to the ajax done callback function

      //some ajax change
      $(this).css({
        "background": "blue"
      }).text("came back with 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>