禁用點擊按鈕演播室動畫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>