using jquery fadein to display a selection of links on page load
Question
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:
//--- 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');
Requested explanation:
We set up a generic queue container by jQuery-ing on an empty object (
$({})
). This seems cleaner than attaching the queue to some node.We select our nodes with any valid jQuery selector, and then use the
each()
functionDoc to loop through them.For each node, we add an entry into our custom queue, using the
queue()
functionDoc.- We give the queue a unique name, "FadeIns," to avoid conflicts.
- Each queue entry will passed a pointer to the next queue entry, when it's called. We capture that with the
nextQ_Item
variable. - The queue item, function has 2 jobs: (1) do the item fade, and (2) call the next queue entry when it is done.
- However, we have split the fadeDoc into 2 parts to accomplish the desired staggered-start.
- 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. - Now we trigger the next element.
- Next, we resume and complete the fade, remembering that it only has (total - stagger-delay) milliseconds left.
- The first fade lasts only for the
- Once our custom queue is built, we fire it off with the
dequeue()
functionDoc.
OTHER TIPS
There is no need to change any of your markup. What you want can be achieved easily with the code below. Live example: http://jsfiddle.net/tw16/pJ5uC/
$(window).load(function () {
fadeA($('#navtop a:first-child'));
});
function fadeA(elem) {
elem.fadeIn(500, function () {
fadeA($(this).next());
});
}
I've used 500 rather than 5000 to speed up the viewing process.
This will get them to all fadein at the same time.
$('#navtop a').fadeIn('slow', function() {
// Animation complete
});
You will need to set up some sort of setTimeout and loop over them