javascript - JQuery 滑出动画不起作用

Question

我试图在单击下一个时让一个 div 滑出，并让另一个滑入以替换它。代码在没有动画的情况下工作(当它只是 .hide() 时)。谁能告诉我为什么它不起作用？

带有 display:flex 的元素不能使用滑入和滑出 Jquery 调用吗？或者？

$("#next").click(function() {
    var current = $(".inner:visible");
    current.hide("slide", { direction: "left" }, 1000)

    var next = current.next(".inner");

    if(next.length == 0)
        next = current.siblings().filter(":first")
    next.css("display", "flex");
    });

#container {
  height: 90%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.inner {
  display: none;
  justify-content: space-evenly;
  align-items: center;
  flex-direction: row;
  height: 100%;
  width: 95%;
}

.inner:first-of-type {
  display: flex;
}

.content {
  width: 50%;
  justify-content: center;
  align-items: center;
  font-size: 16px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<p id="next">next</p>

<div id="container">
  <div class="inner">
    <div class="content">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
    </div>
  </div>
  <div class="inner">
    <div class="content">
      <p>Donec cursus convallis malesuada. Suspendisse potenti. In tempus aliquam tempus. Curabitur aliquet porta neque, eu feugiat mauris egestas et. Mauris ut dui ut est semper ullamcorper vitae eget turpis.
    </div>
  </div>
</div>

没有有问题的动画:

$("#next").click(function() {
    var current = $(".inner:visible");
    current.fadeOut(1000);

    var next = current.next(".inner");

    if(next.length == 0)
        next = current.siblings().filter(":first")
    next.css("display", "flex");
    next.fadeIn(1500);
    });

#container {
  height: 90%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.inner {
  display: none;
  justify-content: space-evenly;
  align-items: center;
  flex-direction: row;
  height: 100%;
  width: 95%;
}

.inner:first-of-type {
  display: flex;
}

.content {
  width: 50%;
  justify-content: center;
  align-items: center;
  font-size: 16px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<p id="next">next</p>

<div id="container">
  <div class="inner">
    <div class="content">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
    </div>
  </div>
  <div class="inner">
    <div class="content">
      <p>Donec cursus convallis malesuada. Suspendisse potenti. In tempus aliquam tempus. Curabitur aliquet porta neque, eu feugiat mauris egestas et. Mauris ut dui ut est semper ullamcorper vitae eget turpis.
    </div>
  </div>
</div>

Answer 1

这似乎是一个很简单的问题。 只需包括来自 jQuery UI 的缓动，一切都应该有效。 https://jqueryui.com/easing/