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 i开发者_如何学运维n 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;}

---

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/

---

Ola ola .... sorry for being late.

THE DEMO FIDDLE

1.

First of all: your HTML can look even like this:

<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">   
        <!-- FREE UP YOUR HTML, jQuery can do it for you! -->
    </div>
</div>

Thanks to a little trick that will clone all your elements for you:

///////// CLONE AND PREPEND SLICES! ////////////// 

var sliceS = $('<div class="sliceSpecs" class="slice" />');
for (var i = 0; i < 36; i++) { // 36 is 6*6 slices
    sliceS.after(sliceS.clone()).prependTo('#sliceContainer');
}

2.

Hide all your slices by fadeing them to '0'

///////// HIDE ALL SLICES ////////////////////////

$('.sliceSpecs').fadeTo(0,0);

3.

You don't need this messy CSS:

#slice1 {background-position:0px 0px;}
#slice6 {background-position:145px 0px;}
#slice5 {background-position:290px 0px;}
... and so on .....

...cause jQuery can set the css backgroundPosition for you:

//////// SET BACKGROUND POSITIONS ////////////////

$('.sliceSpecs').each(function(){       
   var sS = $(this);    
   sS.css({position:'relative'});
   var posX = (sS.position().top);
   var posY = (sS.position().left);
   sS.css({
       backgroundPosition : '-'+ posY +'px -'+ posX +'px'
   });   
});

4.

And after your backgroundPosition/s are set, let's do some perversions: I used here a script of mine from a gallery that I'm working on ('WOWgallery!').

It will create a diagonal pattern by assigning classes:

1  2  3  4  5  6
2  3  4  5  6  7
3  4  5  6  7  8
4  5  6  7  8  9
5  6  7  8  9  10
6  7  8  9  10 11  <-- you can get all class names visible by uncommenting a line in the code.

If (Ex.) you follow the given class '6' you can see the generated diagonal pattern!

var c1 = 0; // slow counter var c2 = 0; // fast counter var slX = 6;

$('.sliceSpecs').each(function() {
    var sl = $(this);
    c2++;
    if (c2 === (slX + 1)){
        c2 = 1;
        c1++;
    }
    sl.addClass('sl' + (c2 + c1));
   // sl.html(c2 + c1);  // !!! uncomment to test maximal c pattern value
});

Small and cute, isn't it?

5.

It's time to add some timeouted animations right?:

var c = 0;
function an() {   

    timeOut = setTimeout(function() {
       c++;
        if(c === 12){c=0;return;} // IF c === the maximum c patt. value+1
       $('.sl' + c).fadeTo(700, 1);
        an();
    }, 200);
}

an();  // Do the animation

P.S. I can comment the code to help you understand.

Hope you enjoyed this demo.
Happy coding!

---

CLICK HERE FOR THE DEMO

First of all thank you for posting this question, I learned a lot =) Before I continue just a couple of notes for you: 1. Generally, putting styles in css is considered better practice 2. in JSFiddle, you do not need to import <script>s you can import jquery from the sidebar 3. Always try to find the logic for a problem and code it wisely and concisely

That being said, Here's what I came up with =) :

HTML:

<div id="container">
   <div id="sliceContainer"></div>
</div>

CSS:

body {background-color:black}

div#container{
    width:960px !important; height:960px;background:#2A2A2A;
    margin: 20px auto; padding:25px 0px 0px 20px;
}

#sliceContainer {height:900px;margin: 0 auto;}

.sliceSpecs { background:url(http://www.frankidollandthebrokentoys.com/123testing/firstdate.jpg);width:145px; height:145px;float:left; margin:5px;}

javascript:

$(document).ready(function() { for (i = 1; i <= 36; i++) {$("#sliceContainer").append($(document.createElement('div')).addClass("sliceSpecs").css('background-position', (((i - 1) % 6) * -145) + "px " + (parseInt((i - 1) / 6) * -145) + "px").fadeTo(0, 0).delay(((i-1)%6 + 1 + Math.floor((i-1)/6))*100).fadeTo(500, 1));}});

---

First of all, in your JS code you spelled slice wrong (you have it as slide). Once you correct that, you should modify your JS to use callbacks rather than chaining the methods together as you have:

setTimeout(function(){
    $("#slice1").hide(function(){
        $(this).fadeIn(1000);
    });
}, 500);

If you modify each of the calls to setTimeout appropriately, I think you'll get the desired effect.

---

The code you linked doesn't work for 2 reasons:

1. Your id lookups in the JS are for "slideX" but the divs are named "sliceX"
2. In order to fade them in, they must be visible at the start, so I added a "display:none" style to the .sliceSpecs

http://jsfiddle.net/dRhHZ/9/

---

You had misspelled the ID names (slide vs slice). In addition, in jsfiddle, do not include script tags in the script section.

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

http://jsfiddle.net/dRhHZ/12/

---

Another way you could do it, if you would like to eliminate the setTimeouts and just use jquery animation:

http://jsfiddle.net/dRhHZ/14/

$(document).ready(function() {
    $("#slice1").delay(500).hide(1).fadeIn(1000);
    $("#slice2").delay(700).hide(1).fadeIn(1000);
    $("#slice3").delay(900).hide(1).fadeIn(1000);
    $("#slice4").delay(1100).hide(1).fadeIn(1000);
    $("#slice5").delay(1300).hide(1).fadeIn(1000);
    $("#slice6").delay(1500).hide(1).fadeIn(1000);
});

NOTE: hide is queued as long as it is given a duration, hence the 1 millisecond.

---

You can hide all the images initially through css itself. This will be better user experience. You had few js errors in your fiddle.

Take a look at this fiddle all the errors are fixed.

http://jsfiddle.net/dRhHZ/13/

---

One solution for this is to provide a callback function. With a callback function, you are saying "When this function finishes, execute this code." You can use this to fade in an image, then provide a callback to fade in the next image once the first one is finished (etc, etc...)

...
hide all elements initially
...
$("#slide1").fadeIn(1000, function() { call next fadeIn here } 
...