如何暂停正在运行的动画并使用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>