Question

我一直在构建this site，它会激活点击时触发的多个元素的位置。如果让序列运行，它运行良好，但是如果你在面板滑动时开始快速点击它，它会很快变得混乱。

我使用Move.js CSS3动画脚本创建动画，因为我发现它比jQuery动画产生了更平滑的效果，但我似乎有相同的队列（）构建常见的问题用jQuery。

我尝试通过在动画运行时向主体添加类来解决问题，并在运行任何其他动画之前检查该类，但它尚未解决问题。

$('.bar').mouseenter(function() {
    if (pageinner.hasClass('closed')) {
        page = $(this).attr('data-page');
        href = "<?php echo get_site_url() ?>" + page;
        pageinner.load(href + ' #page');
        return false;
    }
}).mouseleave(function(){
    page = '',href = '';
});

$('#bar1').click(function(){
    if (body.hasClass('wait')) { return; }

    var c;
    if(this===previousTarget) {
        c = -(Math.round(pagewidth / 5));
        body.addClass('wait');
        run();
        History.back();
        pageinner.addClass('closed').children().remove();
        body.removeClass('page').addClass('home');
        body.removeClass('wait');
        previousTarget=null;
        return true;
    } else {
        c = Math.round(pagewidth / 5);
        body.addClass('wait');
        run();
        history.pushState({}, '', $(this).attr("data-page"));
        setTimeout(function(){
            body.removeClass('home').addClass('page');
            pageinner.removeClass('closed').show();
        },1000);
        body.removeClass('wait');
        previousTarget=this;
        return false;
    }
    function run() {
        move('#bar2')
            .ease('in-out').add('margin-left', c * 3)
            .duration(750)
            .end();
        move('#bar3')
            .ease('in-out').add('margin-left', c * 2)
            .duration(750)
            .end();
        move('#bar4')
            .ease('in-out').add('margin-left', c * 1)
            .duration(750)
            .end();
    }
});

每个元素都有自己的点击事件，类似于这个例子。

Answer 1

你需要推迟删除＆＃34;等待＆＃34;直到动画完成为止。 .end()函数可以采用回调函数，该函数将在动画完成时执行。您可以将它与jQuery Deferred对象的实例结合使用，以在上一个动画完成时执行代码。

您可以将run()功能更改为：

function run() {
    var deferred1 = $.Deferred(),
        deferred2 = $.Deferred(),
        deferred3 = $.Deferred();

    $.when(deferred1, deferred2, deferred3).done(function() {
        body.removeClass('wait');
    });

    move('#bar2')
        .ease('in-out').add('margin-left', c * 3)
        .duration(750)
        .end(function() { deferred1.resolve(); });
    move('#bar3')
        .ease('in-out').add('margin-left', c * 2)
        .duration(750)
        .end(function() { deferred2.resolve(); });
    move('#bar4')
        .ease('in-out').add('margin-left', c * 1)
        .duration(750)
        .end(function() { deferred3.resolve(); });
}

如何使用Move.js阻止排队或禁用单击事件

1 个答案: