滑动div左右过渡

Question

我有两个同时出现的div之间的左/右和左右滑动过渡。

小提琴： https://jsfiddle.net/n8jyzys2/

然而，当前的转变看起来有点像这样 （过渡期间div在不同的行）：

幻灯片转换1

我希望实现的转换与此类似（在转换期间同时将两个div放在同一行）：

幻灯片转换2

有什么想法吗？

JS Credit

jQuery.fn.extend({

  slideRightShow: function() {
    return this.each(function() {
        $(this).show('slide', {direction: 'right'}, 1000);
    });
  },
  slideLeftHide: function() {
    return this.each(function() {
      $(this).hide('slide', {direction: 'left'}, 1000);
    });
  },
  slideRightHide: function() {
    return this.each(function() {
      $(this).hide('slide', {direction: 'right'}, 1000);
    });
  },
  slideLeftShow: function() {
    return this.each(function() {
      $(this).show('slide', {direction: 'left'}, 1000);
    });
  }

});

$("#slide_two_show").click(function () {

    $("#slide_one_div").slideLeftHide();
    $("#slide_two_div").slideRightShow();

});

$("#slide_one_show").click(function () {

    $("#slide_one_div").slideLeftShow();
    $("#slide_two_div").slideRightHide();

});

HTML代码

<div>

    <div id="slide_one_div">
        <br>
        <div class="mydiv">
          <h1>Slide 1 (Left Slide)</h1>
          <p>...</p>
          <button id="slide_two_show">Show Slide 2</button>
        </div>
    </div>

    <div id="slide_two_div" style = "display:none">
        <br>
        <div class="mydiv">
          <h1>Slide 2 (Right Slide)</h1>
          <p>...</p>
          <button id="slide_one_show">Show Slide 1</button>
        </div>
    </div>          

</div>

风格

.mydiv {
    background: green;
    width: 100%;
    height: 100px;
    outline: 1px solid #f93;
}

Answer 1

将此CSS添加到您的页面：

#slide_one_div {
  position: absolute;
  width: 100%;
}

希望我帮忙;）