Анимация JQuery Slide out не работает

Я пытаюсь заставить 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>

Не могли бы вы исправить свой фрагмент, чтобы он работал без ошибок в консоли?

— 10.06.2019 21:37

Хм, это странно. Он работает в моем браузере? Первая анимация работает, а слайд для следующего элемента нет? @cale_b

— 10.06.2019 21:39

javascript jquery html css

10.06.2019 21:32

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Кажется, там довольно простая проблема. Просто включите easing из пользовательского интерфейса jQuery, и все должно работать. https://jqueryui.com/easing/

Хм, я не думаю, что это

— 10.06.2019 21:48

Концептуально этот ответ может быть правильным. Что было бы лучше, так это скопировать фрагмент из вопроса в ваш ответ, включить библиотеку и показать, что она работает....

— 10.06.2019 21:55

@skeefee использует фрагмент кода вместо ссылки на внешний сайт. Отредактируйте свой ответ и щелкните значок бумаги с <> внутри него.

— 10.06.2019 22:18

10.06.2019 21:39

Добавление jquery-ui cdn, похоже, работает. Убедитесь, что вы добавили библиотеку jquery-ui только после jquery.

$("#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>

Спасибо, но это точно так же, как самый последний фрагмент кода, который я опубликовал?

— 10.06.2019 22:16

разница заключается во втором теге script, который они добавили в html-часть.

— 10.06.2019 22:17

Да, я добавил библиотеку jquery-ui, и ваша анимация работает нормально. Я что-то не так понял или вы пытаетесь спросить о чем-то другом?

— 10.06.2019 22:36

10.06.2019 22:11