jQuery вложенный обратный вызов, "игнорирующий" функцию

Question

У меня есть последовательность анимации, которую я пытаюсь реализовать, в которой я буду:

1. постепенное исчезновение div,
2. изменение своей позиции
3. изменение фона
4. затухание в
5. , сдвиньте его вправо, увеличьте мой фоновый счетчик и начните сначала

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

var bgs = ["1.png", "2.jpg", "3.png"] //image paths
var i = 0 //image pointer/counter

function changebg() {
  $(".m").fadeOut(1000, () => {
    $(".m").animate(({
      "margin-left": "0px"
    }), () => {
      $(".m").css(("background-image", bgs[i]), () => {
        $(".m").fadeIn(1000, () => {
          $(".m").animate(({
            "margin-left": "200px"
          }), 1000, () => {
            if (i == 2) i = 0
            else i++
          })
        })
      })
    })
  })
}

Answer 1

Причина, по которой ваше текущее решение не применяет фон, связана со строкой:

$(".m").css(("background-image", bgs[i]), () => {

css() ожидает свойство и значение , ("background-image", bgs[i]) является списком выражений , разделенных запятыми, и возвращает результат последнего выражения Таким образом, вышесказанное эквивалентно:

$(".m").css(bgs[i], () => {

Кроме того, css() также не исключает обратный вызов, поскольку ожидается, что он будет применен немедленно (без учета CSS переходов).

Эта строка должна быть:

$(".m").css("background-image", bgs[i]); // also removing the closing })

---

Можно преобразовать jQuery fadeOut(), fadeIn() и animate() до jQuery отложенные объекты с использованием promise().

A jQuery отложенный объект «затем» (т.е. имеет «затем» метод ) и, таким образом, может использоваться с async / await (или с Promise.resovle()).

Я не уверен, что мой пример охватывает то, что вы пытаетесь сделать, но это то, что я получил из предоставленного вами сценария:

async function cycleBackgrounds($element, backgrounds) {
  while (true) {
    for (const background of backgrounds) {
      await $element.fadeOut(1000).promise();
      await $element.animate({"margin-left": "0px"}).promise();
      $element.css("background-color", background);
      await $element.fadeIn(1000).promise();
      await $element.animate({"margin-left": "200px"}).promise();
    }
  }
}

const promise = cycleBackgrounds($(".m"), ["red", "green", "blue"]);
//    ^ The returned promise will never be resolved, since the function
//      will cycle endlessly. You might still want to add a .catch though.

.m {
  width: 50px;
  height: 50px;
}

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