Javascript 在每个缩略图中淡入淡出？

我所有的缩略图都有等级。拇指

我试图一次一次地淡入，就像我在一些网站上看到的那样，但它似乎不起作用。我的代码在下面

$('.thumb').eachDelay(function(){ 
    $(this).fadeIn('1000'); 
}, 100);

这里怎么了

这是一把小提琴：

我已经尝试了大量的解决方案，但还并没有任何运气，所以希望这将有助于更容易理解我是如何进行代码设置的

尝试以下方法：

$(".thumb").each(function(i) {
    $(this).delay(500*i).fadeIn(1000);
});

试试这个：

$(".thumb").each(function(i) {
    $(this).delay(500*i).fadeIn(1000);
});

---

我不知道有任何jQuery方法称为

eachDelay（）

。由于您的问题不太清楚您想要哪种具体方案，这里有四种不同的选择：

1）如果您想一次将它们全部淡入，可以使用以下命令：

$('.thumb').fadeIn('1000'); 

$('.thumb').delay(1000).fadeIn('1000'); 

function sequentialFade(selector) {
    var items$ = $(selector);
    var index = 0;

    function next() {
        if (index < items$.length) {
            items$.eq(index++).fadeIn('1000', next);
        }
    }
    next();
}

sequentialFade('.thumb');

function sequentialFade(selector, delayTime) {
    var items$ = $(selector);
    var index = 0;

    function next() {
        if (index < items$.length) {
            items$.eq(index++).delay(delayTime).fadeIn(1000, next);
        }
    }
    next();
}

sequentialFade('.thumb', 1000);

2）如果您想在延迟后同时将它们全部淡入，可以使用以下命令：

$('.thumb').fadeIn('1000'); 

$('.thumb').delay(1000).fadeIn('1000'); 

function sequentialFade(selector) {
    var items$ = $(selector);
    var index = 0;

    function next() {
        if (index < items$.length) {
            items$.eq(index++).fadeIn('1000', next);
        }
    }
    next();
}

sequentialFade('.thumb');

function sequentialFade(selector, delayTime) {
    var items$ = $(selector);
    var index = 0;

    function next() {
        if (index < items$.length) {
            items$.eq(index++).delay(delayTime).fadeIn(1000, next);
        }
    }
    next();
}

sequentialFade('.thumb', 1000);

3）如果您想一个接一个地将它们全部淡入淡出，可以使用以下命令：

$('.thumb').fadeIn('1000'); 

$('.thumb').delay(1000).fadeIn('1000'); 

function sequentialFade(selector) {
    var items$ = $(selector);
    var index = 0;

    function next() {
        if (index < items$.length) {
            items$.eq(index++).fadeIn('1000', next);
        }
    }
    next();
}

sequentialFade('.thumb');

function sequentialFade(selector, delayTime) {
    var items$ = $(selector);
    var index = 0;

    function next() {
        if (index < items$.length) {
            items$.eq(index++).delay(delayTime).fadeIn(1000, next);
        }
    }
    next();
}

sequentialFade('.thumb', 1000);

功能顺序淡入淡出（选择器）{
变量项$=$（选择器）；
var指数=0；
函数next（）{
如果（索引

4）如果您想在一次结束和下一次开始之间延迟一个接一个地淡入淡出，您可以使用以下命令：

$('.thumb').fadeIn('1000'); 

$('.thumb').delay(1000).fadeIn('1000'); 

function sequentialFade(selector) {
    var items$ = $(selector);
    var index = 0;

    function next() {
        if (index < items$.length) {
            items$.eq(index++).fadeIn('1000', next);
        }
    }
    next();
}

sequentialFade('.thumb');

function sequentialFade(selector, delayTime) {
    var items$ = $(selector);
    var index = 0;

    function next() {
        if (index < items$.length) {
            items$.eq(index++).delay(delayTime).fadeIn(1000, next);
        }
    }
    next();
}

sequentialFade('.thumb', 1000);

功能顺序淡入淡出（选择器，延迟时间）{
变量项$=$（选择器）；
var指数=0；
函数next（）{
如果（索引

---

最后一个选项的工作演示如下：

我不知道有任何jQuery方法称为

eachDelay（）

。由于您的问题不太清楚您想要哪种具体方案，这里有四种不同的选择：

1）如果您想一次将它们全部淡入，可以使用以下命令：

$('.thumb').fadeIn('1000'); 

$('.thumb').delay(1000).fadeIn('1000'); 

function sequentialFade(selector) {
    var items$ = $(selector);
    var index = 0;

    function next() {
        if (index < items$.length) {
            items$.eq(index++).fadeIn('1000', next);
        }
    }
    next();
}

sequentialFade('.thumb');

function sequentialFade(selector, delayTime) {
    var items$ = $(selector);
    var index = 0;

    function next() {
        if (index < items$.length) {
            items$.eq(index++).delay(delayTime).fadeIn(1000, next);
        }
    }
    next();
}

sequentialFade('.thumb', 1000);

2）如果您想在延迟后同时将它们全部淡入，可以使用以下命令：

$('.thumb').fadeIn('1000'); 

$('.thumb').delay(1000).fadeIn('1000'); 

function sequentialFade(selector) {
    var items$ = $(selector);
    var index = 0;

    function next() {
        if (index < items$.length) {
            items$.eq(index++).fadeIn('1000', next);
        }
    }
    next();
}

sequentialFade('.thumb');

function sequentialFade(selector, delayTime) {
    var items$ = $(selector);
    var index = 0;

    function next() {
        if (index < items$.length) {
            items$.eq(index++).delay(delayTime).fadeIn(1000, next);
        }
    }
    next();
}

sequentialFade('.thumb', 1000);

3）如果您想一个接一个地将它们全部淡入淡出，可以使用以下命令：

$('.thumb').fadeIn('1000'); 

$('.thumb').delay(1000).fadeIn('1000'); 

function sequentialFade(selector) {
    var items$ = $(selector);
    var index = 0;

    function next() {
        if (index < items$.length) {
            items$.eq(index++).fadeIn('1000', next);
        }
    }
    next();
}

sequentialFade('.thumb');

function sequentialFade(selector, delayTime) {
    var items$ = $(selector);
    var index = 0;

    function next() {
        if (index < items$.length) {
            items$.eq(index++).delay(delayTime).fadeIn(1000, next);
        }
    }
    next();
}

sequentialFade('.thumb', 1000);

功能顺序淡入淡出（选择器）{
变量项$=$（选择器）；
var指数=0；
函数next（）{
如果（索引

4）如果您想在一次结束和下一次开始之间延迟一个接一个地淡入淡出，您可以使用以下命令：

$('.thumb').fadeIn('1000'); 

$('.thumb').delay(1000).fadeIn('1000'); 

function sequentialFade(selector) {
    var items$ = $(selector);
    var index = 0;

    function next() {
        if (index < items$.length) {
            items$.eq(index++).fadeIn('1000', next);
        }
    }
    next();
}

sequentialFade('.thumb');

function sequentialFade(selector, delayTime) {
    var items$ = $(selector);
    var index = 0;

    function next() {
        if (index < items$.length) {
            items$.eq(index++).delay(delayTime).fadeIn(1000, next);
        }
    }
    next();
}

sequentialFade('.thumb', 1000);

功能顺序淡入淡出（选择器，延迟时间）{
变量项$=$（选择器）；
var指数=0；
函数next（）{
如果（索引

---

最后一个选项的工作演示如下：

串行动画代码应如下所示（您可以根据需要更改以下1000毫秒）：

var cur=-1；
变量thumbs=$（“.thumb”）；
函数doIt（）{
如果（cur==-1）cur=0；
如果（cur

串行动画代码应如下所示（您可以根据需要更改以下1000毫秒）：

var cur=-1；
变量thumbs=$（“.thumb”）；
函数doIt（）{
如果（cur==-1）cur=0；
如果（cur

hmm这也没用。。似乎一下子就把它们全部淡入淡出实际上是从整个淡入淡出的，所以它一点也不淡出all@JoeBobby我的坏消息，anwser更新了。也可以在行动中看到，嗯，那也没用。。似乎一下子就把它们全部淡入淡出实际上是从整个淡入淡出的，所以它一点也不淡出all@JoeBobby我的坏消息，anwser更新了。另外，在行动中看到它更新了我的答案，只做了一个小的修改。以前的版本假定thumb是HTML中的兄弟元素。

cur.next（）

不保证找到下一个thumb。只有当所有拇指都是同一个父母的兄弟姐妹，而没有干预的非拇指兄弟姐妹时，才会出现这种情况。@jfriend00-你说得对。这就是我更新答案的原因。：）更新了我的答案，只做了一点小小的修改。以前的版本假定thumb是HTML中的兄弟元素。

cur.next（）

不保证找到下一个thumb。只有当所有拇指都是同一个父母的兄弟姐妹，而没有干预的非拇指兄弟姐妹时，才会出现这种情况。@jfriend00-你说得对。这就是我更新答案的原因。：）我不想一次淡入所有缩略图，但在缩略图1淡入后，我希望在缩略图2淡入前有一小段时间。。然后在缩略图3消失之前的一小段时间in@JoeBobby-好的，我回答的最后一个选项就是你刚才要求的。你的问题不太清楚你想要哪一个选项。@Joebby-在我的回答中添加了最后一个选项的工作演示，该选项在拇指中按顺序淡出，每个选项之间有一个延迟：。谢谢你的提琴！我用一把小提琴更新了主帖，在你放这个的同时，我会测试一下，看看它是如何工作的。我不想一次淡入所有的缩略图，但在缩略图1淡入后，我想在缩略图2淡入前有一小段时间。。然后在缩略图3消失之前的一小段时间in@JoeBobby-好的，我回答的最后一个选项就是你刚才要求的。你的问题不太清楚你想要哪一个选项。@Joebby-在我的回答中添加了最后一个选项的工作演示，该选项在拇指中按顺序淡出，每个选项之间有一个延迟：。谢谢你的提琴！我用一把小提琴更新了主帖，在你放这个的同时，我会测试一下，看看它是如何工作的