$(".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:。

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

each:。

THE DEMO FIDDLE

1.

首先:您的超文本甚至可以这样看:

<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>

由于你把所有要素都 clo为你们:

///////// 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 .....

......代表您:

//////// 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.

您的背景 职位/职位是固定的,让人们做一些转变: 我在这里用了我所工作的一根 g子(WOWgallery!) 。

通过分配班级,将形成一种教学模式:

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.

如果(Ex)你遵循第6类,你可以看到所产生的diagonal patterns!

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
});

小型和切割,是没有的?

5.

添加一些过时的动画片的时候到了?

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.,我可以评论守则,帮助你们理解。

Hope you enjoyed this demo.
Happy coding!

rel=“nofollow noreferer”>

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

尽管如此, 这里,我所谈的内容是:

传真:

<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));}});

首先,在您的《联合文件》中,你阐述了错误之处(如果是幻灯的话)。 一旦你纠正,你就应当修改你的联合材料,以便使用反馈而不是像你那样把方法联系在一起:

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

如果您对每一次电话进行修改,请登录<0>>>准时。 我认为,你会取得预期的效果。

由于以下两个原因,你将工作与工作挂钩:

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/"rel=“nofollow> http://jsfiddle.net/dRhHZ/9/。

您错写了ID名称(slide vs)。 此外,在jsfiddle,在文字部分不包括文字标签。

$(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/"rel=“nofollow> http://jsfiddle.net/dRhHZ/12/。

如果你希望删除<代码>,你可以采取另一种方式这样做。 时间范围:和公正使用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 只要有一段时间,即有一毫秒钟就座。

您可以<代码>hide,最初通过单体表示的所有图像。 这将是更好的用户经验。 你们的阴道几乎没有错误。

对所有错误进行仔细研究。

http://jsfiddle.net/dRhH/13/。

其中一个解决办法是提供。 有了警示功能,你就说“这一功能完成后,执行这一规范”。 你们可以利用这个图像来打败形象,然后在第一个图像(etc,等......)完工后,对下一个图像进行 call击。

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