Javascript 多步骤动画，延迟（）和队列（）不工作

我正在尝试设置一些文本的动画。淡入、更改文本、更改颜色、淡出等。不幸的是，

delay（）

似乎存在一个问题，该问题不适用于

html（）

或

text（）

。因此，我尝试使用

queue（）

或

setTimeout（）

使其工作，但都不起作用。 Fadein和fadeout可以工作，但更改文本和背景色不起作用

以下是我尝试过的两种变体，但运气不佳：

备选案文1：

jsFiddle：

备选案文2：

jsFiddle：

---

第二个脚本永远不会工作，因为

setTimeout

不能作为jQuery方法链接（它给出了一个错误）。根据自定义的

queueName

将只执行一次

.dequeue（）

。第二个脚本永远不会工作，因为

setTimeout

不能作为jQuery方法链接（它给出了一个错误）。根据自定义的

queueName

将只执行一次

.dequeue（）

。这似乎确实很有效。

<button>Start Animation</button>

<p>By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!</p>

<div class="eins" style="background:#212f21;height:100px;width:100px;position:absolute;"></div>
<div class="zwei" style="background:#98bf21;height:100px;width:100px;position:absolute;top:200px;"></div>

$(document).ready(function() {
  $("button").click(function() {
    $(".eins")
        .fadeOut(1000)
        .delay(2000, "my-queue")
        .queue("my-queue", function(next) {
            $(".eins").css("backgroundColor", "red");
            $(".eins").html("hahahhaha");
            next();
        })
        .fadeIn(500)
        .animate({left: '250px'}, 2000);
    $(".zwei").fadeOut(1000).fadeIn(4200).animate({left: '350px'}, 1000);
  });
});

<button>Start Animation</button>

<p>By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!</p>

<div class="eins" style="background:#212f21;height:100px;width:100px;position:absolute;"></div>
<div class="zwei" style="background:#98bf21;height:100px;width:100px;position:absolute;top:200px;"></div>

$(document).ready(function() {
  $("button").click(function() {
    $(".eins")
        .fadeOut(1000)
        .delay(2000)
        .setTimeout(function () {
            $(".eins").css("backgroundColor", "red");
            $(".eins").html("hahahhaha");
        }, 5000)
        .fadeIn(500)
        .animate({left: '250px'}, 2000);
    $(".zwei").fadeOut(1000).fadeIn(4200).animate({left: '350px'}, 1000);
  });
});