jquery - 隐藏、延迟、然后淡入

Question

好吧，所以我很难让它发挥作用。什么也没发生。

view the code here因为要复制的东西太多了。嗯..虽然不多，但是对于这里来说太多了。

为了方便起见，我将其缩小了。有 36 张图像，但我只使用了 6 张图像的示例。

简而言之，我有一些方形图像，我需要在前一个图像淡入后稍微开始淡入。天哪，这对我来说应该很容易......

谢谢。

$(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;}

Answer 1

尝试在 JS 框中执行此操作。 HTML 脚本标签在那里无效。首先隐藏所有 .sliceSpecs，然后一一显示它们。您还尝试显示 slide1 等...而不是 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);    

演示:http://jsfiddle.net/dRhHZ/4/

这是一种更简洁的做事方式。您不需要在 JavaScript 中创建元素，因为即使用户禁用了脚本，对其进行硬编码也可以显示。

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

每个演示:http://jsfiddle.net/dRhHZ/24/