Thanks to the comments below. Here is an updated question and code:
I have written two bits of code, a loader and sequential fade in. The loader works by adding the load class which with css displays a loading spinner.gif. Then removes the class and inserts an image.
The second fade's in a sequence of divs in order.
$.fn.myLoader = function() {
$(this).addClass("loading").queue(function(next) {
$(this).removeClass("loading");
$(this).prepend('URL');
next();
});
};
$('#logo').myLoader();
and
$('.load').delay(5000).each(function(i) {
$(this).delay(i * 250).css({
opacity: 0.0,
visibility: 'visible'
}).animate({
opacity: 1.0
});
});
and the following markup:
<div id="logo"></div>
<div class="load" style="visibility: hidden;"></div>
<div class="load" style="visibility: hidden;"></div>
<div class="load" style="visibility: hidden;"></div>
<div class="load" style="visibility: hidden;"></div>
<div class="load" style="visibility: hidden;"></div>
<div class="load" style="visibility: hidden;"></div>
These work separately but I would like to merge the two so that the loader happens and once that has finished, loads the sequential images.
Please point out the errors of my way.
Thanks