Question

我的所有缩略图都有类.thumb

我试图像我在一些网站上看到的那样逐渐消失，但它似乎并没有起作用。我的代码在

之下

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

这里有什么问题？

这是一个小提琴：http://jsfiddle.net/NPWGu/

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

Answer 1

试试这个：

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

Answer 2

我不知道任何名为eachDelay()的jQuery方法。由于您的问题并不十分清楚您想要的确切方案，因此以下是四种不同的选择：

1）如果你想立刻淡化它们，你可以使用它：

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

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

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

3）如果你想一个接一个地淡化它们，你可以使用它：

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

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

sequentialFade('.thumb');

4）如果你想一个接一个地淡化它们，在一个完成和下一个开始之间有一个延迟，你可以使用它：

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

此处最后一个选项的工作演示：http://jsfiddle.net/jfriend00/zg8S4/

Answer 3

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

var cur = -1;
var thumbs = $(".thumb");
function doIt() {
  if(cur == -1) cur = 0;
  else if(cur < thumbs.length-1) cur++;
  else return;
  $(thumbs[cur]).fadeIn(1000, doIt);
}
doIt();

淡入每个缩略图？

3 个答案: