javascript - 如何使用 Move.js 防止排队或禁用点击事件

Question

我一直在构建this site它对多个元素的位置进行动画处理，在单击时触发。如果让序列运行，它会很好地工作，但是如果您在面板滑动时开始快速单击，它很快就会变得困惑。

我使用 Move.js CSS3 动画脚本来创建动画，因为我发现它比 jQuery animate 产生更平滑的效果，但我似乎遇到了 jQuery 常见的相同的 queue() 构建问题.

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

$('.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

您需要延迟删除“wait”类，直到动画完成。 .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(); });
}