如何暫停正在運行的動畫並使用jquery中的一個按鈕運行另一個動畫

Question

在主頁上我有一組正在運行的動畫div，我喜歡做的是通過在用戶單擊後在頁面上動畫添加其他元素來增加交互性其中一個主要導航鏈接，但我希望初始組動畫停止，並且新的一組動畫以單擊主導航開始。任何人有任何想法如何做到這一點？

Answer 1

您可以使用animation-play-state「暫停」一個動畫，但是如果您只想運行一個動畫，那麼當您單擊某個動畫時，您想要運行另一個動畫，則可以應用更改元素的animation屬性的類。

$('button').on('click',function() { 
 
    $('#div').toggleClass('red'); 
 
})

div { 
 
    animation: blue 1s infinite; 
 
} 
 
.red { 
 
    animation: red 1s infinite; 
 
} 
 

 
@keyframes blue { 
 
    50% { 
 
    background: blue; 
 
    color: white; 
 
    } 
 
} 
 

 
@keyframes red { 
 
    50% { 
 
    background: red; 
 
    color: white; 
 
    } 
 
}

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