Question

我想在单击next时使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/

Answer 2

Addind的jquery-ui cdn似乎正在工作。确保仅在jquery之后添加jquery-ui库。

$("#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>
<script
  src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"
  integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E="
  crossorigin="anonymous"></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>

jQuery滑出动画不起作用

2 个答案: