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

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);