在动画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>

Answer 2

您可以在click 事件处理程序中使用jQuery ":animated" 选择器和.is() 来检查元素当前是否动画

function toggle() {

  if (!$(this).is(":animated")) {
    $(this).animate({
      top:this.getBoundingClientRect().top < 50 ? "50px":"0px"
    }, 1500)
  }
  
}

$("div").on("click", toggle);

div {
  top: 0px;
  position: relative;
  font-size: 36px;
  background: green;
  width: calc(18px * 5);
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<div>click</div>