时间戳

首页 > 解决方案 > 延迟第二次点击，直到 animate.css 完成动画

jquery - 延迟第二次点击，直到 animate.css 完成动画

问题描述

我有一个对象，当单击它时，它将淡出屏幕，当单击另一个对象时，它将淡入屏幕。

一旦对象消失，属性 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/这可能更容易理解发生了什么。

我的问题是，在初始淡出动画和可见性设置之前，如何禁用单击第二个对象？

标签： jqueryhtmlcssonclickanimate.css

解决方案

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

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

这可以防止单击事件的任何快速触发。

推荐阅读