How to get this simple jQuery to work?

I'm pretty new to jQuery. I'm trying to create a photo wall where the images will start to fade in one after another as the page loads. Here's the HTML:

<div id="photoWall">
   <a href=""><img src="a.jpg" /></a>
   <a href=""><img src="b.jpg" /></a>
   <a href=""><img src="c.jpg" /></a>
</div>

and the failed jQuery:

开发者_C百科$('#photoWall a').hide();
$('#photoWall a:eq(0)').fadeIn();
if ($('#photoWall a:before:visible')) {
    $(this).fadeIn();
}

My logic is, hide all links containing the images at first. Then fadein the 1st link, next check to see if the previous link is visible, if so fade in the current link, and so on until all links are showing. How to get this to work?

• There is no :before selector.
• Any code that runs after an animation, such as the .fadeIn() after the .fadeOut(), needs to happen in a callback.
• There's no loop here, so it's only going to fade in the first and second images.

This is fancier looking than what you've got, but it's not too bad:

$(function ()
{
    function show($links, i)
    {
        var $link = $links.eq(i);
        if ( !$link.length ) return;
        $link.fadeIn(function ()
        {
            show($links, ++i);
        });
    }

    show($('#photoWall a').hide(), 0);
});

Demo: http://jsfiddle.net/mattball/ECWxM/

function fadethem(elem) {
    elem.fadeIn('slow', function() {
        if (elem.next().length > 0) fadethem(elem.next());
    });
}

fadethem($('#photoWall a:eq(0)'));

Check out the fiddle: http://jsfiddle.net/QFccn/1/

I've hidden the images on pageload using CSS in stead of javascript. Otherwise the images would be displayed until the DOM is ready.

On page load I call the fade function with the first image.

If animation is finished (callback of fadeIn()) I call the function again with next element (if there are more).

This becomes super easy when you use the delay()^[docs] method.

$('#photoWall a').hide().each(function(i) {
    $(this).delay(i * 400).fadeIn();
});

Example: http://jsfiddle.net/eRgPt/ (Borrowing the fiddle from @Matt Ball.)

EDIT:

To explain (so the down-voter can understand), it's really simple.

Using the each()^[docs] method , you can operate on each element that matched the selector individually.

You also get an index argument that is passed to the callback. So all this does is it multiplies the current index by the total length of the animation, making each consecutive element begin n milliseconds later than the previous.

   0 * 400 = 0
   1 * 400 = 400
   2 * 400 = 800
   3 * 400 = 1200

Additionally, you could easily assign the duration of the animation to a variable in order to change both the duration of the animation and the delay.

var duration = 1000;

$('#photoWall a').hide().each(function(i) {
    $(this).delay(i * duration).fadeIn(duration);
});

Example: http://jsfiddle.net/eRgPt/1/