jQuery-禁用按钮单击直到css动画结束

我试图禁用按钮，直到CSS动画结束

负责触发单击事件的代码：

$($controls__right).on('click', function () {
    replace_images();
    direction = 1;
    reload_content(direction);
});

为图像设置动画的函数。在未执行这部分代码之前，按钮应在执行后被禁用

function replace_images() {
    $current__images = $('.device__screen');
    $current__texts = $('.text-area');
    $($current__images[0].children[0]).css({
        '-webkit-animation': 'scroll_down 1s',
        '-moz-animation': 'scroll_down 1s',
        '-ms-animation': 'scroll_down 1s',
        '-o-animation': 'scroll_down 1s',
        'animation': 'scroll_down 1s'
    });
    setTimeout(function () {
        $($current__images[0].children[0]).remove();
    }, 1000);

    $($current__texts[0].children[0]).remove();
}

---

尝试在此上下文中使用

animationend

事件

$element.on('animationend webkitAnimationEnd oanimationend', function () {
    // enable or disable whatever buttons you want
});

其中，

$element

将由css动画设置动画。

使用以下方法如何：

---

编写一个切换函数来禁用/启用按钮，然后在replace_images（）函数的开头和结尾调用此函数

function replace_images() {
    $("#button").prop('disabled', true); //disable

    $current__images = $('.device__screen');
    $current__texts = $('.text-area');
    $($current__images[0].children[0]).css({
        '-webkit-animation': 'scroll_down 1s',
        '-moz-animation': 'scroll_down 1s',
        '-ms-animation': 'scroll_down 1s',
        '-o-animation': 'scroll_down 1s',
        'animation': 'scroll_down 1s'
    });
    setTimeout(function () {
        $($current__images[0].children[0]).remove(function() {
            $("#button").prop('disabled', false) //enable
        });
    );
    }, 1000);

    $($current__texts[0].children[0]).remove();
}