在jQuery中禁用链接一段时间或在动画期间

我想禁用动画期间的链接，我使用backgroundPosition设置动画，当我在第一个动画仍处于打开状态时单击时，它会打断背景。为了防止这种情况，我有两个问题：

如何在元素为动画设置动画时禁用链接上的“单击”事件始终持续4000，因此可以在动画打开时禁用，也可以按设定的时间量禁用

$("#arrows a").on("click", function () {  

var newPos = ....   

        $("#bg").stop().animate({
            backgroundPosition: newPos
        }, 4000) 
});

下一个问题是：如何实际确定元素是否已设置动画，何时未设置动画？它是否必须以某种方式停止才能真正设置为开和关？我尝试了各种选项，但都不起作用，当我尝试这段代码时，它总是显示类“动画”-这意味着它永远不会停止，直到下一次单击

if ($("#bg").is(":animated") ) {
            $("#game").addClass("animated");
} else {
            $("#game").addClass("stopped");
}

如果我能找到如何添加这些类的解决方案，它将解决链接的第一个问题，因为我可以简单地用css删除链接

更新： 在“caramba”的评论和提示之后，我进一步移动了，animate complete是答案，在此之前，我在谷歌上搜索了几个小时，从未发现过这一点。无论如何，这是我现在的代码：

 $("#bg").stop().animate({
            backgroundPosition: newPos
        }, {
            queue: false,
            duration: 4000,
            complete: function() {
                console.log("ok");
                $("#game").addClass("completed")
                // setTimeout(function() {
                    // $("#arrows a").unbind();
                // }, 4000);
           }
       });

它很好地添加了类，但我也尝试在那里设置setTimeout，以便在动画持续时间内禁用链接，但它禁用了完整的链接，问题出在哪里

---

附言：我如何对评论进行投票？我看不到任何增加投票的选项，我想感谢你的评论，是新手不可以使用，还是我只是瞎了眼？

所以我不太清楚你想做什么，但我举了两个例子。 下一次当你问一个问题，如果你能为这里的每个人和你自己分享你的HTML标记是否会很有帮助

无论如何，有两个例子：

jQuery-动画-完成 jQuery-队列 一,。jQuery-动画-完成

我认为这是检查动画完成时最简单的方法，您需要做的就是像这样编写动画函数：

假设这是您的标记，因为您没有显示任何：

<div id="arrows">
    <a href="http://www.google.com?click1" target="_blank">click 1</a>
    <a href="http://www.google.com?click2" target="_blank">click 2</a>
    <a href="http.//www.google.com?click3" target="_blank">click 3</a>
<div>

<div id="bg"></div>

二,。jQuery-队列

---

搜索jquery动画完成和或jquery队列谢谢！我已经用进一步的步骤更新了我的问题。仍然不知道如何在动画打开时禁用jquery链接。”return false'不适用于href，我已经禁用了href，所以我正在尝试解除点击绑定，但如何在4000ms后将其放回？如果可能，可以发布包含的html、css、js吗？谢谢你花这么多时间在这个详细的答复上。检查动画是否“打开”的方法非常有用。但是，如果现有动画仍处于打开状态，我仍然无法阻止指向队列操作的链接。我已经在使用e.preventDefault，但是如果我单击箭头-在动画完成之前，我希望箭头完全处于非活动状态，因此禁止双击或三次单击。在您的示例中，双击箭头时，我的背景会变为50%，我想可能最好防止双击？我的代码：[link]@yennefer很多方法去罗马：-看看这里：现在在单击之后，我们将一个类添加到元素dontLetMeClick并禁用css的可单击性。动画完成后，我们再次删除该类。酷：简单。指针事件：无；虽然在IE 11+中工作，但这就是为什么我一直在寻找js解决方案，尽管我现在很困惑，因为e.preventDefault和ReturnFalseWorkondefault href功能，而不是click事件：没错。e、 preventDefault在href上工作，但您的单击函数会在上触发，该函数是来自的父级

$("#arrows a").on("click", function (e) {  
        e.preventDefault(); // don't let the link do hes work
        var link = $(this).attr("href"); //get the href
        var newPos = '300'; // set newPos 
        $("#bg").animate({  //start animation
            left: "+="+newPos+'px' //animate till here
        }, 2000, function(){
            //the animation is finished
            alert("animation finished");
            // what would you like to do here?
            // maybe need the link
            alert(link);
        });
});

<p class="showQueue">0</p>
<p class="animating">Waiting for animation</p>
<p class="globalAnimationVar">GlobalAnimationVar</p>
<div id="arrows">
    <a href="http://www.google.com">click 1</a>
    <a href="http://www.google.com">click 2</a>
    <a href="http.//www.google.com">click 3</a>
<div>

<div id="bg"></div>

var globalCheckAnimation=false;
showQueue(); // call the showQueue function
function showQueue() {
    var queue = $("#bg").queue("fx"); //check if the element is animating
    if(queue.length > 0) { // do some stuff if it is animating
        $('.animating').text('YES we are animating');
        globalCheckAnimation=true;
        $('.globalAnimationVar').text(globalCheckAnimation);
    } else {
        $('.animating').text('Waiting for animation');
        globalCheckAnimation=false;
        $('.globalAnimationVar').text(globalCheckAnimation);
    }
    $( ".showQueue" ).text( queue.length ); // which "size/amount" from animation
    setTimeout( showQueue, 100 ); // repeat the function every 100 milli secconds
}

$("#arrows a").on("click", function (e) {  
        e.preventDefault();
        var newPos = '300'; 
        $("#bg").animate({
            left: "+="+newPos+'px'
        }, 2000, function(){
            //here the animation is finished
            //we could use the globalCheckAnimation var
            //alert(globalCheckAnimation);
        });
});