Animate.css jQuery使一个接一个的元素具有动画效果
Animate.css jQuery使一个接一个的元素具有动画效果
提问于 2014-04-12 03:20:07
我目前使用的是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动画的新手，所以感谢任何帮助！
回答 2
Stack Overflow用户
发布于 2014-04-12 03:27:46
不幸的是，您不能在CSS动画完成时执行操作。你的其他选择是使用javascript setTimeout()函数，或者将动画移动到JQuery，这将更容易同步。下面是一个例子：
$('#element1').fadeOut(500, function() {
$('#element2').fadeIn(500);
});当动画完成时，fadeOut、fadeIn和其他JQuery动画函数都有一个回调函数。这对计时有很大的帮助。我知道这个例子并不是特别适合你的动画，但是应该演示它是如何实现的。
不过，再看一眼，你的库看起来像是内置了回调功能。也许是因为拼写错误"fucntion()“，所以它不能正常工作？
Stack Overflow用户
发布于 2015-04-02 15:01:48
创建您自己的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秒的持续时间开始"flash“动画。为了更好地理解，我建议学习javascript中的回调是如何工作的。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/23020933
复制相关文章
相似问题
腾讯云开发者
