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

【问题标题】：jQuery - disable button click until css animation endsjQuery - 禁用按钮单击直到css动画结束
【发布时间】：2016-01-05 09:33:50
【问题描述】：

我正在尝试禁用按钮，直到 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();
}

【问题讨论】：

写一个toggle函数来禁用/启用按钮，然后在replace_images()函数的开始和结束时调用这个函数

标签： jquery jquery-click-event

【解决方案1】：

尝试在此上下文中使用animationend 事件，

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

$element 将由 css 动画进行动画处理。

【讨论】：

【解决方案2】：

这个怎么样，使用callbacks：

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

【讨论】：