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

Question

我想在页面上的4个div (div1、div2、div3和div4) 上应用javascript淡入效果（我知道这个原始名称）。然而，我无法使下面的代码工作。我还需要每个淡入之间有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);
});
});

- DanielNolan

---

哦，那是一个错误，我正在参考其他代码，我根本不想要鼠标悬停，我想要的是在加载时触发，但这个 JavaScript 对我来说都是新的！哈哈 - DanielNolan

你想让它们在移动时全部淡出吗？还是只让你悬停的那个淡出？ - Daan

@DaanHeskes 我想让它在加载时发生，但不知道命令是什么。 - DanielNolan

$(document).ready(function() )}; 这个代码会执行其中的所有代码，不一定非得是一个函数。 - Daan

Answer 1

这个代码会将 #div1、#div2、#div3 和 #div4 的透明度在 2 秒内淡化到 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);
});

JSFiddle演示

- Daan

---

嗨，谢谢，但是我指的是每个之间有2秒的间隔 @DaanHeskes - DanielNolan

你太棒了！我一旦能接受你的答案，我就会马上这样做 :) - DanielNolan

我需要外部调用什么吗？ - DanielNolan

Answer 2

还有一个更简单的版本，每2秒淡入一次：

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

演示：http://jsfiddle.net/zno1bw91/1/

- dfsq

---

这会淡化所有类名为 div 的元素，但 OP 只想要 div1、div2、div3 和 div4 这些 id 的元素淡化。 - Daan

谢谢，已点赞。 :) 不要忘记更新 JSFiddle。 - Daan

@dfsq，我真的不知道为什么这么简单的事情让我遇到了这么多麻烦！以前我只需要几分钟就能实现它。这让我发疯了！你能看一下www.cambridgedesigncompany/index.html告诉我我做错了什么吗？这让我疯狂！ - DanielNolan

首先，您的页面不可用。然后，您应该向 Daan Heskes 寻求支持，因为您正在使用他的代码。 - dfsq

Answer 3

你的代码在我的端上完美运行，只有一个错误是你没有正确选择div。 这是你的代码

$(document).ready(function() {
$('#div1,#div2,#div3,#div4').mouseover(function() {

    $(this).css('opacity', .4).fadeTo(2000, 1.0);
}).mouseout(function() {
    $(this).fadeTo(2000, 0.4);
});
});

- Laxmikant Dange

Answer 4

    /**
    * 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();

- CORSAIR