javascript - 滑动div左右过渡

Question

我在两个 div 之间同时发生幻灯片左/右和右/左过渡。

fiddle : 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%;
}

希望我有帮助；)