Question

我有大约10张图像，我希望淡出，但延迟淡出显示每张图像都清晰显示。

    for(i=1;i<=24;i++) {
 $('.stretch').fadeOut(5000).attr('src','images/hello'+i+'.jpg');
     }

我想使用jQuery。

由于让

Answer 1

警告：attr('src', 'blah')会将src设置为等等......我认为这不是你想要的这里有一些选择：

为什么不让所有这些图像共享一个类名，然后你不再需要for循环，你可以简单地使用类名淡化所有图像？

$('.chosenImage', '.stretch').fadeOut(5000);

以上相当于使用CSS

$('.stretch .chosenImage').fadeOut(5000);

请注意，您将父项放在CSS版本中，并将子项放在逗号分隔的JQuery语法版本中。

以上内容将适用于chosenImage班级项目的所有stretch班级项目。

您可以使用正则表达式：这将得到所有helloXX，其中XX是一位或两位数的数字......如果需要，你可以优化正则表达式只能拿到1-24。

$('img', '.stretch').filter(function(){
    return $(this).attr('src').match(/images\/hello[0-9]{1,2}.jpg/);
}).fadeOut(5000);

此代码获取.stretch类中的所有IMG，并使用每个IMGs src属性上的正则表达式过滤它们。

要让它们一个接一个地褪色，你只需要逐个定位每个图像并对它们加以延迟......就像这样：

var delayIt = -1000;
$('img', '.stretch').each(function(){                
    delayIt += 1000;
    $(this).delay(delayIt).fadeOut(5000);
});

这将逐渐淡化班级中的每个图像。

一些相关的JQuery引用：

Answer 2

这是我的头脑，但它的基础是：你需要做一个每个功能，每次稍微更长的暂停。当然，时间安排会有很大不同，但是这样的事情会给你一个想法：

delayTime = 0;
jQuery('.stretch').each( function() {
  jQuery(this).delay(delayTime).fadeOut(5000);
  delayTime = delayTime + 5000;
});

所以，再次，这是一个未经测试的片段，但概念很简单 - 你基本上说我想立即淡化第一个，然后淡化第二个5000以后，然后第三个淡化5000之后，等等等等。

这有意义吗？

Answer 3

试试这段代码：

for(i=1;i<=24;i++) {
        $('.stretch').fadeOut(function() { 
            $(this).load(function() { $(this).fadeIn(); }); 
            $(this).attr('src','images/hello'+i+'.jpg');
        });
}

使用jQuery延迟的fadeout（）图像

3 个答案: