jQuery .fadeOut() not firing callback on elements with CSS transitions
I'm building a feature where I tried several approaches but none seem to work. Hey everyone, I'm running into an issue that's driving me crazy. I'm working with an scenario where the `.fadeOut()` method in jQuery isn't properly firing the callback function when used on elements that have CSS transitions defined. I have a simple setup where I'm trying to fade out a div and then execute some cleanup code once the fade is complete. Here's a snippet of my code: ```javascript $('.fade-button').on('click', function() { $('.fade-target').fadeOut(400, function() { console.log('Fade out complete!'); // cleanup code here }); }); ``` The `.fade-target` div has the following CSS: ```css .fade-target { transition: opacity 0.5s ease; opacity: 1; } ``` However, when I click the button, the div fades out visually, but the console log never executes, and the cleanup code isn't running. When I remove the CSS transition from the `.fade-target`, the callback works as expected. I've confirmed that jQuery is version 3.6.0 and I'm testing in Chrome. Is there a known conflict between jQuery's fade methods and CSS transitions? Am I missing something in my implementation? Any guidance on how to make the callback function fire after the fade out completes would be greatly appreciated. Thanks! I'm working on a service that needs to handle this. I'd really appreciate any guidance on this. For context: I'm using Javascript on macOS. For reference, this is a production microservice.