Многошаговая анимация, delay () и queue () не работают - PullRequest
Новая
       13

Многошаговая анимация, delay () и queue () не работают

1 голос
/ 23 марта 2019

Я пытаюсь оживить какой-то текст.Появление, изменение текста, изменение цвета, исчезновение и так далее.К сожалению, кажется, есть проблема с delay(), которая не работает с html() или text().Поэтому я попытался заставить его работать с queue() или setTimeout(), но ничего из этого не работает.Fadein и fadeout работают, но изменение текста и фона не работает.

Вот два варианта, которые я безуспешно попробовал:

Вариант 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);
  });
});

Вариант 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);
  });
});
...