Multiple steps animation, delay() and queue() not working

Question

I am trying to animate some text. Fade in, change text, change color, fade out and so on. Unfortunately there seems to be an issue with delay() that doesn't work with html() or text(). So I tried to make it work with queue() or setTimeout(), but none of it works. Fadein and fadeout work, but changing text and background-color doesn't work.

Here the two variants I tried without any luck:

Variant 1:

jsFiddle: https://jsfiddle.net/2x61s3dn/

<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);
  });
});

Variant 2:

jsFiddle: https://jsfiddle.net/37hzt8jk/

<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);
  });
});