将javascript淡入应用于4个div，间隔2秒

我正在尝试将javascript淡入应用到名为div1 div2 div3和div4（我知道是原始版本）的页面上的4个div，但是我无法让下面的代码正常工作。我还需要每个淡入之间有2秒的差距。有人能告诉我怎么做吗？这一点点代码现在快把我逼疯了

$(document).ready(function() {
$('#div1,div2,div3,div4').ready(function() {
    $(this).css('opacity', .4).fadeTo(2000, 1.0);
}).ready(function() {
    $(this).fadeTo(2000, 0.4);
});
});

这会在2秒内将#div1、#div2、#div3和#div4的不透明度衰减为0，延迟2秒

$(document).ready(function() {
$('#div1').delay(2000).fadeTo(2000, 0);
$('#div2').delay(4000).fadeTo(2000, 0);
$('#div3').delay(6000).fadeTo(2000, 0);
$('#div4').delay(8000).fadeTo(2000, 0);
});

---

您的代码在我这里工作得很好。唯一的错误是您没有正确地选择div。 这是你的

---

还有一个以2秒为间隔淡入的简单版本：

$(function() {  
    $('#div1, #div2, #div3, #div4').each(function(i) {
        $(this).delay(i * 2000).fadeIn(1000);
    });
});

---

演示：哦，这是一个错误，我用的是其他代码，我根本不想要鼠标盖，我想要它加载，但这个javascript的东西对我来说是全新的！萝莉，你想让它们在移动的时候都褪色吗？还是让你悬停的那一个淡出？@DaanHeskes我希望它在加载时发生，但不知道命令$（document.ready（function（））}；是吗；）它执行其中的所有代码，不一定是一个函数。您好，谢谢，但我的意思是每个代码之间有2秒的间隔@DaanHeskesyour mazing！一旦我能接受你的回答，我会：）我需要外部调用任何东西吗？这会使类

div

中的所有元素褪色，但OP只希望id:

div1

，

div2

，

div3

和

div4

褪色。谢谢你，投票支持：）不过别忘了更新JSFIDLE。@dfsq我不知道为什么这么简单的事情会给我带来这么多麻烦！在这之前，我花了几分钟的时间来实现。我快发疯了！你能看看www.cambridgedesigncompany/index.html来告诉我我做错了什么吗？这快把我逼疯了！首先，您的页面不可用。那么您可能应该请求Daan Heskes的支持，因为您正在使用他的代码。

$(function() {  
    $('#div1, #div2, #div3, #div4').each(function(i) {
        $(this).delay(i * 2000).fadeIn(1000);
    });
});

    /**
    * This function apply fadeIn to N elements with given interval speed
    *
    * @requires jQuery 1.x.x or higher
    *
    * @param {Array} elementsSelectors - list of selectors
    * @see 
    *   fadeInInterval(['#div1', '#div2'], 2000);
    * 
    * @param {Number} intervalMs    - the interval between fadeIn's
    * @param [{Number}] fadeInSpeed - fadeIn speed
    * @param [{Boolean}] reverse    - Reverse the direction of element foreaching to fadein.
    *   By default is false
    *
    * returns {Function} - if call this function you will cancel the interval
    * @see
    *   var cancel = fadeInInterval(['#e1', '#e2', '#e3', '#e4'], 2000, 300, true);
    *   //some on mouseOut event callback
    *   $(element).on('mouseout', function() {
    *       cancel();
    *   })
    */
    function fadeInInterval(elementsSelectors, intervalMs, fadeInSpeed, reverse) {

        $(elementsSelectors[reverse ? 'pop' : 'shift']()).stop().fadeIn(fadeInSpeed || 300);

        var intervalId = setInterval(function () {

            $(elementsSelectors[reverse ? 'pop' : 'shift']()).stop().fadeIn(fadeInSpeed || 300);

            if (!elementsSelectors.length) {
                clearInterval(intervalId);
            }

        }, intervalMs);

        return function() {
            clearInterval(intervalId);
        };
    }

    //Simple usage: 

    var cancel = fadeInInterval(['#div1', '#div2', '#div3', '#div4'], 2000);

    //Prevent cycle

    cancel();