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