Question

我有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');} );

}
});

});

这会随机地对盒子进行动画处理，但是只有在对所有盒子进行动画处理后，它们才能恢复到原始状态，但是我希望每个盒子都进行动画处理，回到原始状态然后对下一个盒子进行动画处理。

Answer 1

我使用异步方式，等待

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

尝试使用JQuery

1 个答案: