jQuery .fadeIn() not showing elements after .append() in a loop with event delegation
I've been banging my head against this for hours. I'm working with an scenario where I'm trying to dynamically append elements to a list and then use jQuery's `.fadeIn()` on them. However, the newly appended elements are not fading in as expected. Here's the scenario: I'm using jQuery version 3.5.1 and I have a button that appends a list item to an unordered list every time it is clicked. I'm trying to apply a fade-in effect to these list items. The question arises when I call `.fadeIn()` right after `.append()`. It seems like the appended elements are not being displayed with the fade effect. Here's a simplified version of my code: ```javascript $(document).ready(function() { $('#addItem').on('click', function() { const newItem = $('<li>New Item</li>').hide(); $('#itemList').append(newItem); newItem.fadeIn(500); }); }); ``` I've tried changing the order of operations and making sure the new element is hidden before appending, but it doesn't seem to help. Additionally, I ensured there's no CSS affecting the visibility of the list items. When I click the button, I see the list item being added instantly without the fade-in effect. I've also checked for console errors, but nothing stands out. Is there a specific jQuery limitation when using `.fadeIn()` immediately after `.append()` in this manner? How can I ensure that the fade effect is applied correctly to the newly added elements? For context: I'm using Javascript on macOS. How would you solve this? This is for a REST API running on Ubuntu 22.04. Am I missing something obvious?