I have 3 hidden text boxes that I want to fade in and slide down simultaneously by 40px when the DOM loads. They should be staggered so that each one triggers after the previous animation finishes.
Below is the relevant JavaScript code snippet:
jQuery(function($) {
"Use Strict"
var outerFunction = function(dropIn, time, offset) {
$(dropIn).each(function() {
var me = $(this);
var mejo = $(this).children('.drop-in-text-opacity-wrap');
setTimeout(function() {
me.css({'margin-bottom': 0});
mejo.fadeIn(1000);
},time)
time = time + offset;
})
}
outerFunction('.drop-in-text', 0, 500)
});
Here is a working example on CodePen for reference.
Although I am close to finding a solution, I am facing an issue where the previous elements jump back to their original position when the second and third iterations start. Despite inspecting the CSS, it does not revert back. I have tried using methods like .dequeue(), animate({//some code},{queue: false}), .stop(), but without any success. Any help or insight would be greatly appreciated!