使用jQuery对多个元素进行交错的淡入和淡出循环

Question

我正在尝试使用jquery为多个元素制作淡入和淡出动画。 很难解释，因此我将首先输入相关代码。

 $(document).ready(function() { $("#1").delay(0).animate({ 'opacity': '1' }, 1000); $("#2").delay(1000).animate({ 'opacity': '1' }, 1000); $("#3").delay(2000).animate({ 'opacity': '1' }, 1000); $("#4").delay(3000).animate({ 'opacity': '1' }, 1000); }); 

 .hideme { opacity: 0; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <div id="1" class="hideme"> <div class="first">A</div> <div class="second">B</div> </div> <div id="2" class="hideme"> <div class="first">A</div> <div class="second">B</div> </div> <div id="3" class="hideme"> <div class="first">A</div> <div class="second">B</div> </div> <div id="4" class="hideme"> <div class="first">A</div> <div class="second">B</div> </div> </div> 

此代码当前执行的操作是使容器中的四个父div各自逐一淡入。 然后，我想要的是让所有具有“ first”类的div同时消失，然后使这些“ first” div中的每个div逐一淡入（就像所有父div在加载时所做的一样，但是仅“第一个” div），使div在同一时间再次消失，并无限循环。 这意味着“第一” div将淡入和淡出，但是“第二” div将在第一次淡入后始终保持在屏幕上。 请记住，“第一个” div不应同时淡入，而是一个接一个。 我在弄清楚如何编写此代码时遇到了麻烦。

Answer 1

您不需要jQuery这样的东西，可以使用CSS来完成。 “第一”和“第二”必须是类，而不是id，因为id必须是唯一的。

 .second { opacity: 1; animation-name: fadeInOpacity; animation-iteration-count: 1; animation-timing-function: ease-in; animation-duration: 1s; } .first { opacity: 1; animation-name: fadeInOpacity; animation-iteration-count: infinite; animation-timing-function: ease-in; animation-duration: 1s; } @keyframes fadeInOpacity { 0% { opacity: 0; } 100% { opacity: 1; } } 

 <div class="container"> <div id="1" class="hideme"> <div class="first">A</div> <div class="second">B</div> </div> <div id="2" class="hideme"> <div class="first">A</div> <div class="second">B</div> </div> <div id="3" class="hideme"> <div class="first">A</div> <div class="second">B</div> </div> <div id="4" class="hideme"> <div class="first">A</div> <div class="second">B</div> </div> </div>