javascript - 禁用动画期间单击按钮 Javascript/jQuery

Question

我的网站按钮有问题。我必须禁用 onclick 功能，而动画不会结束。我为这个元素使用 jQuery、Bootstrap 库和 CSS webkit 动画。 我必须这样做，因为 CSS 和 jQuery 动画在网站上出现错误，并且当动画继续时，按钮会在单击时跳转。

主要代码如下:

$(".start button").click(function(){
    $("#first-layer").fadeOut("slow", function(){});
    $(".start button").addClass("animated fadeOut");
});

button{
    display: inline;
    width: 200px;
    font-family: 'Rajdhani', sans-serif;
    font-weight: bold;
    color: #56E39F;  
    margin-left: 15px;
    
    -webkit-animation-duration: 5s;
  -webkit-animation-delay: 5s;
    
}
        
.button-bg-clr, .button-bg-clr:focus, .button-bg-clr:active, .button-bg-clr:visited {
    background-color: #56E39F;
    transition: background-color 1000ms linear, color 1s linear;
    outline: none !important;
    font-weight: bold;
    
    -webkit-animation-duration: 5s;
  -webkit-animation-delay: 5s;
    
    
}
        
.button-bg-clr:hover{
    background-color: white;
    color: black;
}


#img-rain{
    -webkit-animation-duration: 0.5s;
  -webkit-animation-delay: 0.5s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<main>
        <header>
            <div id="first-layer">
                <div id="header-elements">
                    <div id="img-rain" class="animated fadeIn" class="img"><img src="img/img.png"></div>
                    <div id="typed-strings" class="text">
                        <span class="animated fadeInUp" id="typed"></span>
                        <br/>
                        <span class="description animated fadeIn">Your weather in one place</span>
                    </div>
                </div>
                <div id="typed-strings">
                </div>


                <div class="start">
                    <button type="button" class="btn btn-primary btn-lg responsive-width button-bg-clr animated fadeInUp">Get Started</button>
                </div>
            </div>
            
        
        </header>
    </main>

Answer 1

您可以使用 bind 和 unbind jQuery 方法来创建和删除事件监听器。这是示例(如果有任何不清楚的地方 - 请随时询问):

$(".start button").mouseover(function() {
  setTimeout(function() {
    $(".start button").bind("click", afterClickAnimation);
  }, 1000);
});

$(".start button").mouseleave(function() {
  $(".start button").unbind("click", afterClickAnimation);
  setInterval(function() {
    $(".start button").unbind("click", afterClickAnimation);
  }, 1000);
});

function afterClickAnimation() {
  $("#first-layer").fadeOut("slow", function(){});
  $(".start button").addClass("animated fadeOut");
}

button{
    display: inline;
    width: 200px;
    font-family: 'Rajdhani', sans-serif;
    font-weight: bold;
    color: #56E39F;  
    margin-left: 15px;
    
    -webkit-animation-duration: 5s;
  -webkit-animation-delay: 5s;
    
}
        
.button-bg-clr, .button-bg-clr:focus, .button-bg-clr:active, .button-bg-clr:visited {
    background-color: #56E39F;
    transition: background-color 1000ms linear, color 1s linear;
    outline: none !important;
    font-weight: bold;
    
    -webkit-animation-duration: 5s;
  -webkit-animation-delay: 5s;
    
    
}
        
.button-bg-clr:hover{
    background-color: white;
    color: black;
}


#img-rain{
    -webkit-animation-duration: 0.5s;
  -webkit-animation-delay: 0.5s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<main>
        <header>
            <div id="first-layer">
                <div id="header-elements">
                    <div id="img-rain" class="animated fadeIn" class="img"><img src="img/img.png"></div>
                    <div id="typed-strings" class="text">
                        <span class="animated fadeInUp" id="typed"></span>
                        <br/>
                        <span class="description animated fadeIn">Your weather in one place</span>
                    </div>
                </div>
                <div id="typed-strings">
                </div>


                <div class="start">
                    <button type="button" class="btn btn-primary btn-lg responsive-width button-bg-clr animated fadeInUp">Get Started</button>
                </div>
            </div>
            
        
        </header>
    </main>