How to dynamically load in page elements (i.e. images) with an animation?

Question

I have a 2-row, 3-column grid of large squares that I'm going to place thumbnail links inside of for categorized navigation. I will worry about elements within the squares later, however, as this question pertains to the actual squares themselves.

First, I want to preload all elements and display them at once. This portion doe not require an animation effect. They can just pop in like normal.

Second, I want this grid of squares to come in. The rest of the page and the squares can come in simultaneously since they will be loaded together. This portion does, however, require an animation effect; I want the squares and their respective children elements to zoom in from nothing.

See the "zoom" effect here .

Third, I'd like to load/animate in the squares in a sequential order, from first to last, each one coming in individually (or slightly overlapping). I'm sure we're just talking parameters now.

Well, that's it. I know this a tall order, but I'm pretty new to jQuery so hopefully someone can help with at least some of it!

Answer 1

I created a plugin todo something similar to this. Have a look at it here: https://github.com/navgarcha/jquery-slotload

You could use the onComplete option to move loaded items before the first .loading image so they appear to load in sequence.

As you require a zoom effect rather than a slot machine like effect you can prob replace the animate code todo the zoom.

Feel free to tear apart the code to suit you.