Последовательная загрузка изображения на pageload

Question

Я просмотрел весь этот сайт, и я в основном нашел именно то, что искал. Однако, будучи достаточно компетентным с CSS/HTML, Javascript для меня совершенно незначителен, и я боюсь, что я тут тускнею.

Я пытаюсь получить некоторые изображения для загрузки последовательно при загрузке страницы, затухающей один за другим. Я изменил предыдущий Fiddle к этому, который фактически отражает то, что я хочу (за исключением утки!), И вы можете увидеть его здесь: http://jsfiddle.net/v8azx/1/

Моя проблема в том, что я не могу ее получить для запуска на моей странице. У меня есть файл .js, озаглавленный sequencer.js, и поставил это в голове страницы: (? И только в этом, что может быть проблемой)

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

Моего файл sequencer.js состоит из этого

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

.fbimg - это класс, который я пытаюсь загрузить последовательно. У меня на моей странице два экземпляра.

Моя догадка заключается в том, что javascript просто не работает на моей странице, так как он работает безупречно на скрипке. Когда я загружаю свою страницу, изображения просто не появляются (из-за отображения: нет, я полагаю), который, кажется, является необходимым включением.

Что мне не хватает?

Answer 1

Убедитесь, что вы загрузили первый скрипт jquery; вы, возможно, пропустили, включая это в своем документе.

Я бы затем обернул ваш javascript в jquery 'document ready'.

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