jQuery .animate() unexpectedly skips values when chaining animations on elements with CSS transitions
I'm trying to debug I've searched everywhere and can't find a clear answer... Quick question that's been bugging me - I'm experiencing an scenario where using jQuery's `.animate()` method on an element that also has CSS transitions applied causes the animation to skip the intermediate values. I'm trying to animate the `width` and `opacity` of a div, but when I chain the animations, the `opacity` seems to jump directly to the final value without going through the expected gradual transition. Here's a simplified version of my code: ```javascript $('.my-div') .animate({ width: '200px' }, 500) .animate({ opacity: 0 }, 500); ``` The CSS for `.my-div` has a transition defined: ```css .my-div { transition: width 0.5s ease, opacity 0.5s ease; } ``` When I run the jQuery code, I notice that the `width` animation completes smoothly, but when it starts animating `opacity`, it instantly jumps to `0` instead of fading out gradually. I’ve tried setting the `transition` properties to `none` before the animation, but the behavior remains the same. I also checked to ensure that no other scripts are conflicting with this code and that I’m using jQuery version 3.6.0. Is there a way to properly chain these animations so that they work harmoniously with the CSS transitions? Any insights or best practices would be greatly appreciated. For context: I'm using Javascript on Windows. Thanks in advance! What are your experiences with this?