使用JQuery的两个div之间的水平滑动效果

Question

我有两个div，我在它们之间使用滑动效果单击一个按钮，看起来像这样：

function openNav() {
  $(".lediv1").animate({
    left: '-100%'
  }, {
    duration: 500,
    start: function() {
      $(".lediv2").show().animate({
        left: '0%'
      }, 500);
    },
    complete: function() {
      $(".lediv1").css({
        "display": "none"
      });
    }
  });
}

function closeNav() {
  $(".lediv2").animate({
    left: '100%'
  }, {
    duration: 500,
    start: function() {
      $(".lediv1").animate({
        left: '0%'
      }, 500);
    },
    complete: function() {
      $(".lediv1").show();
      $(".lediv2").hide();
    }
  });

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
  <div class="lediv1" style="position: relative; width: 100%; left: 0px; top: 0px; right: 0px;background:#F00;float:left;">
    <div>
      <div class="text-center">Hello Hello!</div>
      <div class="text-center">Hello Hello!</div>
      <div class="text-center">Hello Hello!</div>
      <button class="closebtnT" style="cursor:pointer;" onclick="openNav()"> go </button>
    </div>
  </div>
  <div class="lediv2" style="display:none;position: relative; width: 100%; left: 0px; top: 0px; right: 0px;background:#FF0;float:left;">
    <div>
      <div class="text-center">I don't know why you say goodbye, I say hello!</div>
      <div class="text-center">I don't know why you say goodbye, I say hello!</div>
      <div class="text-center">I don't know why you say goodbye, I say hello!</div>
      <div class="text-center">I don't know why you say goodbye, I say hello!</div>
      <div class="text-center">I don't know why you say goodbye, I say hello!</div>
      <div class="text-center">I don't know why you say goodbye, I say hello!</div>
      <div class="text-center">I don't know why you say goodbye, I say hello!</div>
      <button style="cursor:pointer;" onclick="closeNav()"> back </button>
    </div>
  </div>
</div>

问题是我希望在动画过程中div的位置如下所示：

我在CSS中添加了 float：left 属性，但是它不起作用。

我该如何解决？

我需要您的帮助。

Answer 1

function openNav() {
    $("#slideWrapper").animate({left: '-100%'}, 500);
}

function closeNav() {
    $("#slideWrapper").animate({left: '0%'}, 500);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div style="width:100%;overflow:hidden;">
<div id="slideWrapper" style="width:200%;position:relative;white-space:nowrap">
  <div class="lediv1" style="width:50%;background:#F00;display:inline-block;">
    <div>
      <div class="text-center">Hello Hello!</div>
    <button  class="closebtnT" style="cursor:pointer;" onclick="openNav()"> go </button>
    </div>	      
  </div>
  <div class="lediv2" style="width:50%;background:#FF0;;display:inline-block;">
    <div>
      <div class="text-center">I don't know why you say goodbye, I say hello!</div>
      <button  style="cursor:pointer;" onclick="closeNav()"> back </button>
    </div>
  </div>
</div>
</div>