Search code examples
jquerycssfading

using jquery fadein to display a selection of links on page load

I want to use jQuery to fade in links inside a nav div on page load. Currently they're styled using an a and have individual id's.

#navtop a {etc.}

Will I have to change that into a class, add another one that hides the links and reapply the the class when the fadein starts or is there an easier method?

Also I'd like the links to fade in one after another.

HTML:

<div id="navtop">
    <a id="link1" href="link.php"><img src="img/logotrans.gif" width="30" height="30" /></a>
    <a id="link2" href="link.php">News</a>
    <a id="link3" href="link.php">Blog</a>
    <a id="link4" href="link.php">Tour</a>
    <a id="link5" href="link.php">Photos</a>
    <a id="link6" href="link.php">About</a>
    <a id="link7" href="link.php">Contact</a>
 </div>

This is as far as I've got with the JavaScript:

$(window).load(function() {
    $('#link1').fadeIn(5000, function() {
        // Animation complete
    });
});
Solution

  • You can queue up the fade-ins with a jQuery queue. Like so:

    See it live at jsFiddle.

    //--- Queue-up the fade-in's
var animationQ = $({});

$("#navtop a").each ( function () {
    var jThis = $(this);

    animationQ.queue ('FadeIns', function (nextQ_Item) {

        jThis.fadeIn (5000, function() {
            nextQ_Item ();
        } );
    } );
} );

//--- Start the fade-ins.
animationQ.dequeue ('FadeIns');


    This approach has the advantage that you can queue up any collection of nodes, just by changing the selector. They do not have to be siblings.

    Update:
    To stagger the fade-in starts part-way in, use:

    var fadeTime    = 5000; //-- How long will an individual fade last? (mS)
var fadeStagger = 500;  /*-- How far into i=one element's fade will 
                             the next elements fade start? (mS)
                        */

//--- Queue-up the fade-in's
var animationQ = $({});

$("#navtop a").each ( function (J) {
    var jThis = $(this);

    animationQ.queue ('FadeIns', function (nextQ_Item) {
        jThis.fadeTo (fadeStagger, fadeStagger / fadeTime , function() {
            nextQ_Item ();
            jThis.fadeTo (fadeTime - fadeStagger, 1);
        } );
    } );
} );

//--- Start the fade-ins.
animationQ.dequeue ('FadeIns');


    See it at jsFiddle.

    Requested explanation:

    1. We set up a generic queue container by jQuery-ing on an empty object ( $({}) ). This seems cleaner than attaching the queue to some node.

    2. We select our nodes with any valid jQuery selector, and then use the each() functionDoc to loop through them.

    3. For each node, we add an entry into our custom queue, using the queue() functionDoc.

      1. We give the queue a unique name, "FadeIns," to avoid conflicts.
      2. Each queue entry will passed a pointer to the next queue entry, when it's called. We capture that with the nextQ_Item variable.
      3. The queue item, function has 2 jobs: (1) do the item fade, and (2) call the next queue entry when it is done.
      4. However, we have split the fadeDoc into 2 parts to accomplish the desired staggered-start.
        1. The first fade lasts only for the fadeStagger delay time. We calculate the ending opacity by the ratio of the delay time to the overall time.
        2. Now we trigger the next element.
        3. Next, we resume and complete the fade, remembering that it only has (total - stagger-delay) milliseconds left.
    4. Once our custom queue is built, we fire it off with the dequeue() functionDoc.