Animate.css jQuery animate one element after another
Question
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.
link to library : 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!
2 answers
solution1
0 2014-04-11 19:27:45
Unfortunately you can't perform an action on completion of a CSS animation. Your other options are to use javascript setTimeout() function, or move the animations to JQuery, which will be easier to synchronize. 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. 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()"?
solution2
0 2015-04-02 07:01:48
Creating your own jQuery plugin could be useful. Place this code right after jQuery definition:
$.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. For better understanding i suggest to learn how callbacks work in javascript.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.