jQuery .fadeIn() not triggering on elements with CSS opacity set to 1
I'm relatively new to this, so bear with me... I'm attempting to set up I'm experiencing an scenario where I have several div elements that I want to fade in using jQuery's `.fadeIn()` method. The question arises when I set the CSS opacity of these elements to 1 beforehand. When I call `.fadeIn()`, it seems like nothing happens, and the expected fading animation does not trigger. I have tried various configurations, but the elements remain visible without any fading effect. Here's a snippet of the relevant code: ```html <div class="fade-box" style="display: none; opacity: 1;">Box 1</div> <div class="fade-box" style="display: none; opacity: 1;">Box 2</div> <button id="fade-button">Fade In Boxes</button> ``` ```javascript $(document).ready(function() { $('#fade-button').on('click', function() { $('.fade-box').fadeIn(1000); }); }); ``` I expected that clicking the button would fade in both `.fade-box` divs, but they just appear instantly without any animation. I've confirmed that the CSS `display` is set to `none` initially, so I don't understand why the fade effect is not working. I've also tried removing the `opacity: 1;` style, but then the elements don't show up at all. In addition, I'm using jQuery version 3.6.0, and I've checked for conflicting CSS rules that might affect the animation. Any insights into why `.fadeIn()` behaves this way under these circumstances would be greatly appreciated! Any ideas how to fix this?