Question

我想在动画期间禁用链接，我使用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'评论之后，我想要寻找什么，我更进一步，动画完成是答案，在此之前我谷歌搜索了几个小时，从来没有偶然发现这一点。无论如何，这是我现在的代码：

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

它很好地添加了这个类，但我也试图在那里适应setTimeout以禁用时间动画持续的链接，但它禁用它完成，问题出在哪里？

PS。我如何投票？我看不到添加投票的任何选项，我要感谢评论，新手不可用，还是我只是盲目？

Answer 1

所以对我来说，你想要做的事情并不是很明确，但我已经设置了两个例子。（下次你问一个问题是否会非常有帮助你是否为这里和你自己分享你的HTML标记）

无论如何，有两个例子：

jQuery - 动画 - 完成
jQuery - queue

<强> 1。 jQuery - 动画 - 完整 fiddle

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

让我们说这是你的标记，因为你没有显示任何：

<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>

这是你的javascript：

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

<强> 2。 jQuery - queue fiddle

<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>

的javascript：

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

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

1 个答案: