jQuery .fadeIn() optimization guide as expected with images inside a flexbox layout
I'm optimizing some code but I'm converting an old project and I'm having an scenario with jQuery's `.fadeIn()` method not behaving as expected when applied to images that are displayed inside a flexbox container... Specifically, the images are not fading in smoothly; instead, they seem to appear instantly without any transition effect. Here's a snippet of my HTML structure: ```html <div class="flex-container"> <div class="flex-item"> <img src="image1.jpg" class="fade-image" style="display: none;" /> </div> <div class="flex-item"> <img src="image2.jpg" class="fade-image" style="display: none;" /> </div> </div> ``` And my jQuery code looks like this: ```javascript $(document).ready(function() { $('.fade-image').each(function(index) { $(this).delay(index * 500).fadeIn(1000); }); }); ``` I expected the images to fade in one after the other, with a smooth transition. However, they all just pop up at once without any fading effect. After some debugging, I confirmed that the images are loaded and the `.fadeIn()` function is being called correctly. I also tried removing the `style="display: none;"` inline style, but that just caused the images to display immediately without waiting for the `.fadeIn()` to run. I'm using jQuery version 3.6.0 and running this in a Chrome browser. Are there any known issues with using `.fadeIn()` in flexbox contexts, or could there be other factors affecting the animation? Any help would be appreciated! For reference, this is a production REST API. Hoping someone can shed some light on this. My development environment is macOS. Any advice would be much appreciated.