CLICK HERE FOR THE DEMO

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/

Answer 2

Ola ola ....对不起迟到了。

THE DEMO FIDDLE

WOWgallery diagonal squared pattern jQuery

1

首先：您的HTML看起来像这样：

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

感谢一个小技巧，将为您克隆所有元素：

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

将所有切片隐藏为淡入'0'

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

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

3

你不需要这个凌乱的CSS：

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

...因为jQuery可以为你设置css backgroundPosition：

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

在你的backgroundPosition设置之后，让我们做一些变态：我在这里使用了我正在处理的画廊中的一个剧本（'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.

如果（例如）你按照给定的等级'6'，你可以看到生成的对角线模式！

var c1 = 0; //慢柜台 var c2 = 0; //快速计数器 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。我可以评论代码以帮助您理解。

希望你喜欢这个演示。
快乐的编码！

Answer 3

CLICK HERE FOR THE DEMO

首先感谢您发布此问题，我学到了很多东西=）在我继续为你做几个笔记之前：一般来说，把风格放在css中被认为是更好的做法 2.在JSFiddle中，您不需要导入<script>，您可以从侧边栏导入jquery 3.始终尝试找到问题的逻辑并明智而简洁地编码

话虽如此，这是我想出来的=）：

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

Result

Answer 4

首先，在你的JS代码中拼写错误的片段（你将它作为幻灯片）。一旦你纠正了这个，你应该修改你的JS以使用回调而不是像你一样将方法链接在一起：

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

如果你恰当地修改了对setTimeout的每次调用，我认为你会得到预期的效果。

Answer 5

您链接的代码无法正常工作：

您在JS中的ID查找是针对＆＃34; slideX＆＃34;但div被命名为＆＃34; sliceX＆＃34;
为了淡入它们，它们必须在开始时可见，所以我添加了一个＆＃34; display：none＆＃34;样式为.sliceSpecs

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

Answer 6

您拼错了ID名称（slide vs slice）。另外，在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/

如果你想消除setTimeout并只使用jquery动画，你可以采用另一种方法：

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

注意：hide排队，只要给定持续时间，因此为1毫秒。

Answer 7

您最初可以通过css本身hide所有图片。这将是更好的用户体验。你的小提琴中有很少的js错误。

看看这个小提琴所有错误都已修复。

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

Answer 8

一个解决方案是提供callback function。使用回调函数，您说＆＃34;当此函数完成时，执行此代码。＆＃34;您可以使用它来淡入图像，然后在第一个图像完成后提供回调以淡入下一个图像（等等......）

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

隐藏，延迟，然后淡入

8 个答案:

THE DEMO FIDDLE

1

2

3

4

5

CLICK HERE FOR THE DEMO