hide, delay, then fadeIn

ok so im having trouble getting this to work. nothing is happening.

view the code here as there is too much to copy. well.. it isnt much, but too much for here.

i've minified it for ease. there are 36 images, but i have only used an example with 6 images.

in a nutshell, i have square images that i need to start a fade in slightly after the previous one fades in. gosh, this should be easy for me...

thank you.

$(document).ready(function() {
    setTimeout( function(){$("#slide1").hide().fadeIn(1000);}, 500);
    setTimeout( function(){$("#slide2").hide().fadeIn(1000);}, 700);
    setTimeout( function(){$("#slide3").hide().fadeIn(1000);}, 900);
    setTimeout( function(){$("#slide4").hide().fadeIn(1000);}, 1100);
    setTimeout( function(){$("#slide5").hide().fadeIn(1000);}, 1300);
    setTimeout( function(){$("#slide6").hide().fadeIn(1000);}, 1500);
});

<div style="display:none;"><img src="firstdate.jpg" /></div>
<div style="width:1000px; background-color:#666;margin-left:auto; margin-right:auto">
<div id="sliceContainer">
    <div class="sliceSpecs" id="slice1"></div>
    <div class="sliceSpecs" id="slice2"></div>
    <div class="sliceSpecs" id="slice3"></div>
    <div class="sliceSpecs" id="slice4"></div>
    <div class="sliceSpecs" id="slice5"></div>
    <div class="sliceSpecs" id="slice6"></div>
</div>
</div>

body {background-color:black}
#sliceContainer {width: 930px; height:930px; display:block; margin-left:35px; margin-right:35px}
.sliceSpecs {background:url(http://www.frankidollandthebrokentoys.com/123testing/firstdate.jpg);width:145px; height:145px; display:block; float:left; margin:5px}

#slice1 {background-position:0px 0px;}
#slice6 {background-position:145px 0px;}
#slice5 {background-position:290px 0px;}
#slice4 {background-position:435px 0px;}
#slice3 {background-position:580px 0px;}
#slice2 {background-position:725px 0px;}

Solution

Try doing this in the JS box. HTML script tags are not valid there. Hide all of the .sliceSpecs first, then show them one by one. You were also trying to show slide1 etc... instead of slice1.

$(".sliceSpecs").hide();

setTimeout(function() {
    $("#slice1").fadeIn(1000);
}, 500);
setTimeout(function() {
    $("#slice2").fadeIn(1000);
}, 700);
setTimeout(function() {
    $("#slice3").fadeIn(1000);
}, 900);
setTimeout(function() {
    $("#slice4").fadeIn(1000);
}, 1100);
setTimeout(function() {
    $("#slice5").fadeIn(1000);
}, 1300);
setTimeout(function() {
    $("#slice6").fadeIn(1000);
}, 1500);

Demo: http://jsfiddle.net/dRhHZ/4/

Here is a cleaner way of doing things. You don't need to create the elements in javascript, as hard-coding it will allow it to display even if the user has scripting disabled.

$(".sliceSpecs").hide().each(function(i) {
    var target = $(this);
    setTimeout(function() {
        target.fadeIn(1000);
    }, 200 * i);
});

each demo: http://jsfiddle.net/dRhHZ/24/