CODEWITHSUNDEEP
jquery
Kaly
Kaly

Reputation: 15

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:

$('#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?

Upvotes: 1

Views: 216

Answers (3)

Matt Ball
Matt Ball

Reputation: 359826

  • 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/

Upvotes: 3

user113716
user113716

Reputation: 322492

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/

Upvotes: 0

PeeHaa
PeeHaa

Reputation: 72662

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).

Upvotes: 2

Related Questions