jQuery .fadeIn() optimization guide as expected after .append() in a dynamically generated list
I'm prototyping a solution and I've looked through the documentation and I'm still confused about I'm currently working on a feature where I dynamically generate a list of items using jQuery and want to apply a fade-in effect when the new items are added to the DOM. I'm using jQuery version 3.6.0, and here's the relevant part of my code: ```javascript $('#addItem').on('click', function() { const newItem = $('<li>New Item</li>'); $('#itemList').append(newItem); newItem.hide().fadeIn(500); }); ``` The goal is to make the newly appended `<li>` elements fade in smoothly. However, the fade-in effect seems to be ignored when the items are appended. Instead, they just appear immediately without any transition. I've verified that the `#itemList` is correctly targeting the `<ul>` element in my HTML, and the click event is firing as expected. I've also tried chaining the methods like this: ```javascript $('#itemList').append(newItem.hide().fadeIn(500)); ``` But it seems that this doesn't work either, as it results in the new item displaying without fading in. Additionally, I checked for any CSS rules that might be affecting the visibility, but everything seems fine. I've also tested this in both Chrome and Firefox, and the behavior is the same. Am I missing something, or is there a known scenario with jQuery's .fadeIn() in this context? Any help would be appreciated! For context: I'm using Javascript on Windows. Thanks in advance! I'm using Javascript latest in this project. I'm coming from a different tech stack and learning Javascript. Any feedback is welcome!