禁用点击按钮演播室动画Javascript/jQuery

Question

我有问题，我的网站上的按钮。我必须禁用onclick函数，而动画不会结束。我为这些元素使用jQuery，Bootstrap库和CSS webkit动画。 我必须这样做，因为CSS和jQuery动画在网站上进行了窃听，当动画继续时，按钮跳跃onclick。

下面是主要代码：

$(".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方法来创建和删除事件侦听器。这里是例子（如果有的话是不是cleare - 随便问）：

$(".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

您可以使用jQuery ":animated"选择和.is()内click事件处理程序来检查，如果该元素是目前动画

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>