Animate.css jQuery将一个元素动画化
[英]Animate.css jQuery animate one element after another
问题描述
I am currently using the animate.css library and i am trying to add a class to one element then once that animation has ran i want to add another class to another element so it in simple terms something fades in then something else fades in afterwards. 
我当前正在使用animate.css库，并且尝试将一个类添加到一个元素中，然后一旦动画运行，我想将另一个类添加到另一个元素中，因此简单来说，某些东西会淡入淡出，然后其他东西会淡入淡出。
link to library : Animate.css 链接到库： Animate.css
example code : 示例代码：
<!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>
The above is the way i tried to accomplish this but it doesn't work. 上面是我尝试完成此操作的方法，但是它不起作用。 Im fairly new to jquery/css animations so any help appreciated! 我对jquery / css动画还算陌生，因此感谢您的帮助！
2 个解决方案
解决方案1
0 2014-04-11 19:27:45
Unfortunately you can't perform an action on completion of a CSS animation. 不幸的是，您无法在CSS动画完成时执行操作。 Your other options are to use javascript setTimeout() function, or move the animations to JQuery, which will be easier to synchronize. 您的其他选择是使用javascript setTimeout()函数，或将动画移动到JQuery，这将更易于同步。 Here's an example: 这是一个例子：
$('#element1').fadeOut(500, function() {
$('#element2').fadeIn(500);
});
fadeOut, fadeIn, and other JQuery animation functions come with a callback for when the animation is complete. fadeOut，fadeIn和其他JQuery动画函数带有动画完成时的回调。 This helps quite a lot with timing. 这对计时很有帮助。 I know this example isn't specifically your animations, but should demonstrate how it can be done. 我知道这个示例并非专门针对您的动画，但应演示如何完成。
On second glance, though, your library looks like it has callback functionality built in. Perhaps it's not working properly because of the typo "fucntion()"? 但是，乍一看，您的库看起来像是内置了回调功能。也许由于输入“ fucntion（）”而无法正常工作？
解决方案2
0 2015-04-02 07:01:48
Creating your own jQuery plugin could be useful. 创建自己的jQuery插件可能会很有用。 Place this code right after jQuery definition: 将此代码放在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);
}
With this you are able to use it like this: 有了这个，您就可以像这样使用它：
$(".some_element").animate_css("shake", 1.5, function() {
$(".some_element").animate_css("flash", 2.5);
} );
This code starts "shake" animation with 1.5 second duration and after it starts "flash" animation with 2.5 seconds duration. 该代码以1.5秒的持续时间启动“摇动”动画，并以2.5秒的持续时间启动“闪光”动画。 For better understanding i suggest to learn how callbacks work in javascript. 为了更好地理解，我建议学习回调如何在javascript中工作。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.