Javascript jQuery动画不同步

动画开始后不久，它就不同步了。 这些div应该一个接一个地淡入淡出

请看我下面的代码

谢谢

(document).ready(function(){ 
    animate_loop = function animate_loop(){
            $( "#w01" ).animate({ opacity: 0.4, }, 1000,
                function(){ $( "#w01").animate({ opacity: 1}, 600)
                animate_loop();
            } );    
    }
   animate_loop(); 

    animate_loop = function animate_loop(){
            $( "#w02" ).animate({ opacity: 0.4, }, 1500,
                function(){ $( "#w02").animate({ opacity: 1}, 600)
                animate_loop();
            } );    
    }
   animate_loop(); 

    animate_loop = function animate_loop(){
            $( "#w03" ).animate({ opacity: 0.4, }, 2000,
                function(){ $( "#w03").animate({ opacity: 1}, 600)
                animate_loop();
            } );    
    }
   animate_loop(); 

    animate_loop = function animate_loop(){
            $( "#w04" ).animate({ opacity: 0.4, }, 2500,
                function(){ $( "#w04").animate({ opacity: 1}, 600)
                animate_loop();
            } );    
    }
   animate_loop(); 
});

---

如果您正试图制作淡入淡出效果，请使用css并使用setInterval在不同的时间添加一个类。使用

.each（index，el）

对每个元素进行迭代。索引将为1、2、3、4等。。。所以用它来延迟动画

下面是一个演示：

---

如果您想要更多的控制，请使用下面的代码。我强烈建议使用添加类，然后通过CSS设置动画，而不是使用jquery循环

这里有一个新的演示：

---

@你是什么意思？你对不同的div使用相同的函数。一旦第二个函数启动，它就会调用相同的函数。为什么所有的东西都包装在文档中准备好了？你的HTML是什么样子的？是的，它应该在第一个元素结束后为另一个元素调用相同的函数@miro HTML只是使用float将div一个嵌套在另一个之上…@miro至于准备好的文档，我已经更改了它，我已经扭曲了其中的函数。我如何使用ID来调整它，并专门针对每个元素，以便更好地控制它？看起来很棒。唯一的问题是我没有使用列表，只使用div。尝试了这个类。在css中自行运行，但它不起作用。我想这是因为……名单与此无关。只需将此小提琴的CSS中的所有内容复制并粘贴到您的or.CSS文件中，您就缺少了一些关于CSS选择器的基本知识：标记、类、ID等。这里有一个教程：我有，看一看：仍然不工作…将整个documnet与html粘贴到JSFIDLE中

$(document).ready(function(){ 
    $('.child').each(function(index, el){
        setTimeout(function(){
        $(el).addClass('go');
        }, 200*index);
    });
});

$(document).ready(function(){ 
    $('#w01').delay(1000).queue(function(){
        $(this).addClass("go");
    });

    $('#w02').delay(1500).queue(function(){
        $(this).addClass("go");
    });

    $('#w03').delay(2000).queue(function(){
        $(this).addClass("go");
    });

    $('#w04').delay(2500).queue(function(){
        $(this).addClass("go");
    });
});