Попытка анимировать цвет ящиков с помощью JQuery - PullRequest
Новая
       40

Попытка анимировать цвет ящиков с помощью JQuery

0 голосов
/ 16 июня 2019

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

Используемый код: 

$(function(){

$(".button").click(function(){

for (var a = [1, 2, 3, 4], i = a.length; i--; ) {
var random = a.splice(Math.floor(Math.random() * (i + 1)), 1)[0];

$( ".rectangle"+random.toString() ).animate({
          backgroundColor: "#aa0000",
          color: "#fff",
        },2000,function(){$(this).removeAttr('style');} );

}
});

});

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

1 Ответ

0 голосов
/ 16 июня 2019

мой подход с использованием асинхронного, жду 

$(function(){
        var a = [1, 2, 3, 4]

        async function loopTheBoxes ( arr, callback ) {
            for ( let i = 0; i < arr.length; i++ ) {
                await callback( arr[i] );
            }
        }

        function animateTheBoxes() {
            $(".button").click( () => {
                loopTheBoxes( a, ( index ) => {
                    return new Promise( ( resolve ) => {
                        $( ".rectangle-" + index ).animate({
                            backgroundColor: "#aa0000",
                            color: "#fff"
                          }, 2000, function() {
                              $(this).removeAttr( 'style' );
                              return resolve();
                          } );
                    });
                });
            });
        }

        animateTheBoxes();
});
...