如何淡入和淡出多个元素？

Question

我可以让它只使用一个，但如果我添加多个它会同时淡入和淡出它们（而不是一个接一个）。 这是我尝试过的：

$(document).ready(function(){
setTimeout(function(){
$("#head1").fadeToggle(1000);
}, 1200);
$("#head1").fadeToggle(1000);
setTimeout(function(){
$("#head2").fadeToggle(1000);
}, 1200);
$("#head2").fadeToggle(1000);
});

这同时淡入和淡出它们。 如何使用 jQuery 实现连续衰落？

Answer 1

您必须添加超时持续时间，例如：

 $(document).ready(function(){
    
        var duration = 1200;
        setTimeout(function(){
        $("#head1").fadeToggle(1000);
        }, duration);
        $("#head1").fadeToggle(1000);//this will execute right away you will need another timeout
        setTimeout(function(){
        $("#head2").fadeToggle(1000);
        }, duration * 2);
        $("#head2").fadeToggle(1000);//this will execute right away you will need another timeout
   });

Answer 2

我最终遇到了 jQuery's.delay()。 以下是最终效果最好的：

$("#head1").delay(1000).fadeIn(1000).delay(500).fadeOut(1000);  
$("#head2").delay(3600).fadeIn(1000).delay(500).fadeOut(1000);
$("#head3").delay(6200).fadeIn(1000);