Question

我有一个对象，当单击该对象时，它将淡出屏幕，而当单击另一个对象时，它将淡出回到屏幕中。

对象淡出后，将应用Visibility：hidden属性，但是在对象返回之前，可见性将设置为可见，然后播放动画。否则，它只会在屏幕上弹出。

问题是，当您单击对象的速度过快时，在上一个动画完成之前，先前的可见性不会恢复，因此两个对象最终被隐藏。

我提供了当前的工作代码。只要花点时间单击对象，此方法就可以很好地工作，但是如果单击得太快，则会中断。

$(document).ready(function(){
console.log("[debug] - Script loaded ...")

//////////////////////////////////////////////////
//                   Variables                  //              
//////////////////////////////////////////////////

    var allCards = $(".card")
    var selectedCard
    var animationEnded
    var removeClasses = "animated fadeOutUp fadeInDown"
    var pullCardOut = "selected-card animated fadeOutUp"
    var putCardBack = "animated fadeInDown"

// Assign a unique ID Number to each card ...
    allCards.attr('id', function(i) {
        console.log("[debug] - Assigned " + (i+1) + " cards a unique ID.")
        return 'card'+(i+1);
    });

//////////////////////////////////////////////////
//                  Card Click                  //              
//////////////////////////////////////////////////

    allCards.click(function(event){   
        // Get the unique ID of which card was clicked and store it in "cardClicked" variable ...
        var cardClicked = event.target.id;
        var selectedCard = $("#" + cardClicked)
        var animationEnded = "webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend"
        var previouslySelectedCard = null

        // Dump the clicked card to the console ...
        // console.log("[debug] - cardClicked = "+cardClicked+" ...")
        console.log("[debug] - selectedCard = " + selectedCard + " ... (WHAT?)")
        console.log("[debug] - " + cardClicked + " was clicked");

        // Find any current card that may already be the selected card,
        //   and remove the previously selected card, before selecting the new card.

        if ($("#all-cards").find("div.selected-card").length !== 0) {
            console.log("[debug] - Found a selected card")
            // Find the card number of the previously clicked card
            var previouslySelectedCard = $('.selected-card').attr('id');

            console.log("#" + previouslySelectedCard + " was previously selected")
            $("#" + previouslySelectedCard).css("visibility", "visible");
            $("#" + previouslySelectedCard).removeClass(pullCardOut).addClass(putCardBack).one(animationEnded, function() {

            });

        } else {
            console.log("[debug] - No cards currently selected")
        }


        //Step 2: Add the appropriate classes to fade the card up.
        //selectedCard.removeClass("selectedCard "+removeClasses);

        selectedCard.addClass(pullCardOut).one(animationEnded, function() {
            selectedCard.css("visibility", "hidden");
        });

        //Step 3: Return the card to the holder, if anywhere else on the page is clicked.
        //  Remove all associated classes and reset the state back to a refreshed page.
    });

}）;

我在这里有我的代码的工作模型：http://jsfiddle.net/swox9a0y/3/，这可能更容易理解发生了什么。

我的问题是，如何禁用第二个对象的单击，直到最初的淡出动画和可见性已设置？

Answer 1

您可以分配变量检查以防止在超时结束之前重新单击，或使用Promise。

//Create a variable to track if element is animating
var elementIsAnimating = false;

//Inside click function, set the variable to true.
allCards.click(function(event){  

    //Check if element is animating
    if (!elementIsAnimating) { 

        ...

        selectedCard.addClass(pullCardOut).one(animationEnded, function() {
            selectedCard.css("visibility", "hidden");
            elementIsAnimating = false;
        });
        elementIsAnimating = true; //This executes right after the class is added, preventing any future clicks until it is false again.

    }
}

Answer 2

只需在要单击的元素上将指针事件设置为“无”，然后以与动画相同的时间将其恢复为“自动”。因此，如果您的动画持续1秒：

$('.my_button').click(function() {
    $(this).css('pointer-events', 'none')
    setTimeout(function() {
    $(this).css('pointer-events', 'auto')
    }, 1000)
})

这防止了click事件的快速触发。

延迟第二次单击，直到animate.css完成动画为止

2 个答案: