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

【问题标题】：Horizontal slide effect between two divs with JQuery使用 JQuery 的两个 div 之间的水平滑动效果
【发布时间】：2018-11-10 00:49:51
【问题描述】：

我有两个 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 属性，但它不起作用。

我该如何解决？

我需要你的帮助。

【问题讨论】：

标签： javascript jquery html css

【解决方案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>

【讨论】：

感谢您的回答，效果很好，但是，如果我在这些 div 中有不同数量的内容会怎样？例如，我在一个 div 中有一段 3 行，在另一个 div 中有一段 6 行。我尝试更改为min-height:height:50px;，但它不起作用。
那是不正确的语法。应该是：min-height:50px.
但是现在我想到了绝对定位是行不通的。让我快速编辑。
对不起，我写错了，是min-height:50px。我用这个更改编辑了我的问题。
编辑代码不使用绝对定位，所以高度现在应该可以自动了。