Question

我目前正在使用animate.css库，我正在尝试将一个类添加到一个元素然后一旦该动画运行我想要将另一个类添加到另一个元素，所以它简单地说，某些东西渐渐消失然后其他东西消失在之后。

链接到图书馆： Animate.css

示例代码：

<!doctype html>
<html>
<head>
</head>
<body>

    <p id="welcome-text">Welcome!</p>
    <img id="welcome-image" src="assets/img/banner">


<script src="assets/js/jquery.js"></script>
<script>
jQuery(function() {

$('#welcome-text').addClass('animated bounceInDown');

$('#welcome-text').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', fucntion() {
    $('#welcome-image').addClass('animated fadeInUpBig');
});


});

</script>

</body>
</html>

以上是我试图完成此任务的方式，但它不起作用。我是jquery / css动画的新手，所以任何帮助升值！

Answer 1

不幸的是，您无法在完成CSS动画时执行操作。您的其他选择是使用javascript setTimeout()函数，或将动画移动到JQuery，这将更容易同步。这是一个例子：

$('#element1').fadeOut(500, function() {
    $('#element2').fadeIn(500);
});

fadeOut，fadeIn和其他JQuery动画函数带有动画完成时的回调。这对时间有很大帮助。我知道这个例子并不是你的动画，但应该证明它是如何完成的。

乍一看，你的图书馆看起来内置了回调功能。也许因为拼写错误“fucntion（）”而无法正常工作？

Answer 2

创建自己的jQuery插件可能很有用。在jQuery定义之后立即放置此代码：

$.fn.animate_css = function(animation, duration, callback) {
    if ((typeof duration !== "undefined") || (duration != null) ) {
        this.css("-webkit-animation-duration", duration+"s");
    }
    this.addClass("animated " + animation);
    this.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', callback);
}

有了这个，你可以这样使用它：

$(".some_element").animate_css("shake", 1.5, function() {
    $(".some_element").animate_css("flash", 2.5);
} );

此代码启动＆＃34; shake＆＃34;持续1.5秒的动画，并在它开始后播放＆＃34; flash＆＃34;持续2.5秒的动画。为了更好地理解，我建议学习如何在javascript中使用回调。

Animate.css jQuery动画一个接一个的元素

2 个答案: