jQuery Lifehack: slowEach Function
Level: Intermediate, prerequisites: JavaScript & jQuery
For those of you who really just want to get the good stuff I have posted the complete function here, but for those of you who want to better understand how this function works I have go into more detail below.
So what in the world is slow each?
When I first started using jQuery I loved having the .each() function that allowed me to pass in any class or item and be able to cycle through each of them in order to perform operations. However, being a visual designer I of course wanted to be able to do visual effects on each of the items I was manipulating. The sad thing was that because jQuery was built mostly to effect change to the DOM of a page, the developers of course made sure that the .each() function rapid fired all changes & effects to all elements that it was pass all at once.
My first attempt at solving this was to add complicated delays within the function that would then build upon each other and eventually get me to where I wanted to go. This was of course time consuming and not to mention not very scalable for the next project since I would have to rip out and replace any project specific elements I had added while accomplishing this.
So like most developers who get fed up with doing the same thing over and over I decided to extract the functionality I wanted an create my own custom function that I could easily move from project to project. So instead of continuing to talk about doing this let’s go ahead and create a practical project for you to walk through.
Learn by doing
The following code is really a template for you get the ball rolling, I’m going to make a few assumptions: One that you know something about HTML & CSS, Two that you at least the foundations of jQuery. I’m sorry to those of you who have made it this far and now are feeling the sad disappointment of realizing you might now have the prerequisites need to complete this project. Copy the following html document into your local browser and follow along.
The template above lays out the following boxes within a single container. However when you open the page you will not see the red boxes because we have given them an opacity of zero hiding them from view on initial page load. We’ve done this so that we can an animation to these boxes as we move through them. We’ve also included the slowEach function so that we can call it as we develop this program.

What we want to do is to effect a visual effect on each of the items above, giving enough time for one animation to begin or finish before moving onto the next. What this will do essentially is allow us to add a delay between each step, while cycling through our entire DOM list. Lets get started. Copy the following statement over your document.ready function within your template.
Let’s break down what is happening here. We are passing a set of classes into our function, in this case the red squares inside our project. Once we’ve called our customer slowEach function we are first passing in a function that will tell the our program what to do with the item once it reaches that item in the cycle. In this case we are using $(this) to refer to the current item we are cycling through and then using jQuery’s animate function to create some sort of a visual effect. Now this is just one example of something you can do within the function, but the sky is the limit. Anything that you could technically do with jQuery to an item you can do within this function. The second thing that we are passing into our function is the number of milliseconds we want delayed between each of our cycles. This means that if we pass in 500ms the function will fire on the first item in our list, then wait 500ms and then fire again until all our items have been manipulated. Go ahead and add this call and refresh the page.

