写了一个jquery连续动画的函数，但是太长了，请大家看看怎么抽象化

Question

其实就是依次给四个元素添加类，移出类

$(document).ready(function(){
    setInterval(function(){
        $(".reason_item1>.front").addClass("reason_item1_move").one('animationend',function(){
            $(this).removeClass("reason_item1_move");
            $(".reason_item2>.front").addClass("reason_item2_move").one('animationend',function(){
                $(this).removeClass("reason_item2_move");
                    $(".reason_item3>.front").addClass("reason_item3_move").one('animationend',function(){
                    $(this).removeClass("reason_item3_move");
                        $(".reason_item4>.front").addClass("reason_item4_move").one('animationend',function(){
                        $(this).removeClass("reason_item4_move");
                    })
                })
            })
        })
    },20000);
})

Answer 1

回调金字塔问题，一般用es6的await，或者 async 库来处理。动画方面可以看看jquery的animate 或者 css3 动画。