Animate.css jQuery将一个元素动画化

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);
} );

该代码以1.5秒的持续时间启动“摇动”动画，并以2.5秒的持续时间启动“闪光”动画。 为了更好地理解，我建议学习回调如何在javascript中工作。

Animate.css jQuery将一个元素动画化

问题描述

2 个解决方案

解决方案1
0 2014-04-11 19:27:45

解决方案2
0 2015-04-02 07:01:48

Animate.css jQuery将一个元素动画化

问题描述

2 个解决方案

解决方案1 0 2014-04-11 19:27:45

解决方案2 0 2015-04-02 07:01:48

解决方案1
0 2014-04-11 19:27:45

解决方案2
0 2015-04-02 07:01:48