Sequential image load on pageload

Question

I've looked all over this site, and I've largely found exactly what I'm looking for. However, while being reasonably competent with CSS/HTML, Javascript is utterly new to me, and I'm afraid I'm being dim here.

I'm trying to get some images to load in sequentially on page load, fading in one after another. I've modified a previous Fiddle to this, which mirrors virtually identically what I want for (with the exception of the duck!), and you can see it here: http://jsfiddle.net/v8azx/1/

My problem is that I can't get it to run on my page. I have a .js file entitled sequencer.js, and have put this in the head of the page:

<script type="text/javascript" src="/sw3/sequencer.js"></script>

My sequencer.js file consists of this (and only this, which might be the problem?)

$('.fbimg').each(function (i) {
$(this).delay(500 * (i + 1)).fadeIn(1000);
});

.fbimg is the class that I'm trying to load sequentially. I have, on my page, two instances of it.

My hunch is that the javascript simply isn't running on my page, since it works flawlessly on the fiddle. When I load my page, the images simply don't appear (because of the display:none, I assume) which seems to be a necessary inclusion.

What am I missing?

Answer 1

Make sure that you have the jquery script loaded first; you might have missed including it in your document.

I would then wrap your javascript in the jquery 'document ready' function.

$( document ).ready(function() {
  $('.fbimg').each(function (i) {
  $(this).delay(500 * (i + 1)).fadeIn(1000);
  });
});