Waiting for animation to finish with jQuery

  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Posts: 854

Post 3+ Months Ago

So if I want a jQuery animation to finish before executing the next animation, how do I go about doing this? I totally get the callback function availability, but with my code, I'm not sure how it would be of use.

Example:
JAVASCRIPT Code: [ Select ]
$('p').each( function() {
$(this).fadeIn(300);
});
 
  1. $('p').each( function() {
  2. $(this).fadeIn(300);
  3. });
  4.  

So say I wanted each paragraph to fade in one at a time, not knowing how many paragraphs there are on the page. How would I go about accomplishing this?
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • natas
  • PHP Ninja
  • Proficient
  • natas
  • Posts: 308
  • Loc: AFK

Post 3+ Months Ago

I'm really a beginner at JavaScript so I can't be of much help personally, but check out this site. Is that what you're trying to accomplish?

http://www.stumbledupon.com/
http://www.stumbledupon.com/jAnimate.js
  • Bigwebmaster
  • Site Admin
  • Site Admin
  • User avatar
  • Posts: 9086
  • Loc: Seattle, WA & Phoenix, AZ

Post 3+ Months Ago

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:

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
});
  1. $(document).ready(function() {
  2.    //Let's first hide all of the boxes
  3.    $('#container div').each( function() {
  4.       $(this).hide();
  5.    });
  6.    
  7.    //Now lets select the first box
  8.    var box = $('#container div').first();
  9.    
  10.    //Finally lets go through each box fading them in
  11.    var $id = setInterval(function() {
  12.       box.fadeIn(1000); //takes one second to fully fade in
  13.       box = box.next();
  14.       if(box.length == 0) {
  15.          clearInterval($id);
  16.       }
  17.    }, 500); //set delay between each animation to 0.5 seconds
  18. });


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.
  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Posts: 854

Post 3+ Months Ago

Wow BWM, this is awesome! Can't believe I didn't think of it. Would you mind if I made this a plugin for jquery and posted it up here when I'm done? (assuming I'm succesful at it)
  • Bigwebmaster
  • Site Admin
  • Site Admin
  • User avatar
  • Posts: 9086
  • Loc: Seattle, WA & Phoenix, AZ

Post 3+ Months Ago

Yeah sounds great to me, looking forward to seeing what you come up with :)
  • Zealous
  • Guru
  • Guru
  • User avatar
  • Posts: 1240
  • Loc: Sydney

Post 3+ Months Ago

that is some nice js, i would also be interested in see what is in development.

Post Information

  • Total Posts in this topic: 6 posts
  • Users browsing this forum: No registered users and 135 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
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.