我试图使用jquery或javascript回调一个简单的动画

Im trying to callback a simple animation using jquery or javascript

本文关键字：一个 简单 动画 回调 jquery javascript      更新时间：2023-09-26

我的.css文件中的动画名为@keyframes scrollTextTwo{}。js文件中的代码是：

$(document).ready(function(){
  rightBox.style.animation = "scrollTextTwo 10s 1";
});

当我在浏览器中加载.html文件时，它会完美地运行一次，或者如果我将滚动TextTwo 10后的"1"：替换为infinite，它将无限运行。我的问题是，只有在#rightBox完成了上面例子中的动画之后，我才能从.css文件中获得第二个对象，如#leftBox来进行动画制作。

我用代码笔附上了所有三个文档：html/css/.js，以防有人想深入研究代码。

http://codepen.io/hoyos/pen/dGMGbX

您可以监听animationend事件。使用.one()方法附加事件侦听器，使其只激发一次。当事件被触发时，这意味着动画已经结束，这意味着您可以在回调中为其他元素设置动画。

更新示例

$('#rightBox').css('animation', "scrollTextTwo 5s 1").one('animationend', function () {
  $('#leftBox').css('animation', "scrollTextTwo 5s 1");
});
相关文章：