Question

在主页上我有一组动画div正在运行，我喜欢做的是通过在用户点击其中一个主导航链接后设置页面上的其他元素来增加交互性，但我想要初始的组动画只需单击主导航即可停止并启动新的动画组。任何人都知道如何做到这一点？

Answer 1

你可以＆＃34;暂停＆＃34;使用animation-play-state的动画，但如果您只想运行一个动画，那么当您点击某个内容时，您希望运行另一个动画，您只需应用可更改该元素的animation属性的类。

＆＃13;

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

＆＃13;

div {
  animation: blue 1s infinite;
}
.red {
  animation: red 1s infinite;
}

@keyframes blue {
  50% {
    background: blue;
    color: white;
  }
}

@keyframes red {
  50% {
    background: red;
    color: white;
  }
}

＆＃13;

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

＆＃13;

如何暂停正在运行的动画并在jquery中使用一个按钮运行另一个动画

1 个答案: