Waiting for animation to finish with jQuery
- mindfullsilence
- Professor
- Joined: Aug 04, 2008
- Posts: 846
- Status: Offline
June 10th, 2011, 1:58 am
Use your words like arrows to shoot toward your goal.
- Anonymous
- Bot
- Joined: 25 Feb 2008
- Posts: ?
- Loc: Ozzuland
- Status: Online
June 10th, 2011, 1:58 am
- natas
- PHP Ninja
- Joined: Mar 28, 2009
- Posts: 305
- Loc: AFK
- Status: Offline
June 10th, 2011, 3:37 am
Custom Web Design
- Bigwebmaster
- Site Admin
- Joined: Dec 20, 2002
- Posts: 8925
- Loc: Seattle, WA & Phoenix, AZ
- Status: Offline
June 10th, 2011, 12:59 pm
This one stumped me for a bit, but I actually thought it would be something good to know in the future for myself, so I did some research for you. There were no clear answers online, some complicated solutions, but I wanted something fairly simple which I finally had to create myself. You can see the example of the jQuery Delayed Consecutive Animations that I created working here:
examples/jquery-consecutive-animations/
Each element will have its own jQuery animation and there will be a delay before the next one will start. I wrote the script in a way that it does not matter how many elements you have, it will go through all of them in order until it reaches the end of the animation where it calls the JavaScript clearInterval function to stop the loop. This is important otherwise it would continue the loop even after all of your animations have faded in. Visually you wouldn't notice a difference since executing the fadeIn function again wouldn't change anything since all of the elements have already faded in, however you would be wasting CPU resources in the browser at that point for your visitor. You want the loop to stop once they have all been iterated through, and that's the purpose for that. Just thought an explanation was necessary
The important part of the example I provided above is this:
I tested this in Firefox, Internet Explorer, and Chrome, and it seemed to work in each of the browsers. Originally I tried to do this using the callback function to do a recursive loop, however, JavaScript throws errors saying too much recursion so that was out of the question.
By the way, if you want the animation to completely finish before the next one starts, you would need to set that 500 millisecond delay above to at least the animation's length which above is currently 1000 milliseconds. The way I did it above the next animation starts once the current animation is half way done.
examples/jquery-consecutive-animations/
Each element will have its own jQuery animation and there will be a delay before the next one will start. I wrote the script in a way that it does not matter how many elements you have, it will go through all of them in order until it reaches the end of the animation where it calls the JavaScript clearInterval function to stop the loop. This is important otherwise it would continue the loop even after all of your animations have faded in. Visually you wouldn't notice a difference since executing the fadeIn function again wouldn't change anything since all of the elements have already faded in, however you would be wasting CPU resources in the browser at that point for your visitor. You want the loop to stop once they have all been iterated through, and that's the purpose for that. Just thought an explanation was necessary
The important part of the example I provided above is this:
JAVASCRIPT Code: [ Select ]
$(document).ready(function() {
//Let's first hide all of the boxes
$('#container div').each( function() {
$(this).hide();
});
//Now lets select the first box
var box = $('#container div').first();
//Finally lets go through each box fading them in
var $id = setInterval(function() {
box.fadeIn(1000); //takes one second to fully fade in
box = box.next();
if(box.length == 0) {
clearInterval($id);
}
}, 500); //set delay between each animation to 0.5 seconds
});
//Let's first hide all of the boxes
$('#container div').each( function() {
$(this).hide();
});
//Now lets select the first box
var box = $('#container div').first();
//Finally lets go through each box fading them in
var $id = setInterval(function() {
box.fadeIn(1000); //takes one second to fully fade in
box = box.next();
if(box.length == 0) {
clearInterval($id);
}
}, 500); //set delay between each animation to 0.5 seconds
});
- $(document).ready(function() {
- //Let's first hide all of the boxes
- $('#container div').each( function() {
- $(this).hide();
- });
- //Now lets select the first box
- var box = $('#container div').first();
- //Finally lets go through each box fading them in
- var $id = setInterval(function() {
- box.fadeIn(1000); //takes one second to fully fade in
- box = box.next();
- if(box.length == 0) {
- clearInterval($id);
- }
- }, 500); //set delay between each animation to 0.5 seconds
- });
I tested this in Firefox, Internet Explorer, and Chrome, and it seemed to work in each of the browsers. Originally I tried to do this using the callback function to do a recursive loop, however, JavaScript throws errors saying too much recursion so that was out of the question.
By the way, if you want the animation to completely finish before the next one starts, you would need to set that 500 millisecond delay above to at least the animation's length which above is currently 1000 milliseconds. The way I did it above the next animation starts once the current animation is half way done.
Ozzu Hosting - Want your website on a fast server like Ozzu?
- mindfullsilence
- Professor
- Joined: Aug 04, 2008
- Posts: 846
- Status: Offline
June 15th, 2011, 7:58 pm
Use your words like arrows to shoot toward your goal.
- Bigwebmaster
- Site Admin
- Joined: Dec 20, 2002
- Posts: 8925
- Loc: Seattle, WA & Phoenix, AZ
- Status: Offline
June 15th, 2011, 8:51 pm
Yeah sounds great to me, looking forward to seeing what you come up with
Ozzu Hosting - Want your website on a fast server like Ozzu?
- Zealous
- Guru
- Joined: Apr 15, 2011
- Posts: 1195
- Loc: Sydney
- Status: Offline
June 24th, 2011, 1:16 am
Page 1 of 1
To Reply to this topic you need to LOGIN or REGISTER. It is free.
Post Information
- Total Posts in this topic: 6 posts
- Users browsing this forum: No registered users and 98 guests
- You cannot post new topics in this forum
- You cannot reply to topics in this forum
- You cannot edit your posts in this forum
- You cannot delete your posts in this forum
- You cannot post attachments in this forum
