I am currently working on creating a fade in and out animation for multiple elements using jquery. It's a bit complex to explain, so I will start by sharing the relevant code.
$(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>The current functionality of this code involves each of the four parent divs within the container fading in one by one. What I aim to achieve is to then have all the divs with the class "first" fade out simultaneously, followed by each of those "first" divs fading in sequentially (similar to the initial loading sequence but only affecting the "first" divs), then having them fade out again together, and repeating this process indefinitely. Essentially, the "first" divs will be alternating between fading in and out, while the "second" divs will remain visible continuously after their initial fade-in. It is crucial that the "first" divs do not fade in at the same time, but rather one after the other. I am encountering challenges in coding this specific requirement.