Question

我想在动画期间禁用对元素的单击，当动画结束时，再次启用它。这是代码：

$(document).on('click touchstart', '.slot1-up', function(e){
                e.preventDefault();

                firstSlotPos = parseInt($(".jSlots-wrapper:nth-child(1) .slot").css('top'));
                console.log(firstSlotPos)
                if (firstSlotPos < -309) {
                    $(".jSlots-wrapper:nth-child(1) .slot").stop(true,true).animate( { 'top' : firstSlotPos  + 310 + "px" },600, 'easeInOutSine', function() {

                    });
                }

        });

Answer 1

您可以使用off / on动态添加/删除事件挂钩，但这可能会变得混乱。

我首选的方法是在显示其状态的元素上存储data属性。从中您可以确定是否允许执行处理程序功能。像这样：

$(document).on('click touchstart', '.slot1-up', function(e){
    e.preventDefault();
    var $el = $(this);
    if (!$el.data('animating')) {
        var $slot = $(".jSlots-wrapper:nth-child(1) .slot");
        $el.data('animating', true);
        firstSlotPos = parseInt($slot.css('top'));
        if (firstSlotPos < -309) {
            $slot.stop(true,true).animate({ 'top' : (firstSlotPos + 310) + "px" }, 600, 'easeInOutSine', function() {
                $el.data('animating', false);
            });
        }
    }
});

Answer 2

只需使用伪选择器:animated检查：

$(document).on('click touchstart', '.slot1-up', function (e) {
    e.preventDefault();
    // if animated, return {undefined}
    if($(".jSlots-wrapper:nth-child(1) .slot").is(':animated')) return;       
    firstSlotPos = parseInt($(".jSlots-wrapper:nth-child(1) .slot").css('top'));
    if (firstSlotPos < -309) {
        $(".jSlots-wrapper:nth-child(1) .slot").stop(true, true).animate({
            'top': firstSlotPos + 310 + "px"
        }, 600, 'easeInOutSine', function () {

        });
    }
});

动画期间禁用点击

2 个答案: