jQuery .animate() optimization guide as expected for multiple CSS properties on a single element
I've been struggling with this for a few days now and could really use some help... After trying multiple solutions online, I still can't figure this out. I'm trying to animate multiple CSS properties on an element using jQuery's `.animate()` method, but it seems to not work as expected. For example, I'm trying to animate both the `width` and `opacity` of a div simultaneously, but the opacity animation doesn't start until the width animation is complete. Here's the code I'm using: ```javascript $('#myDiv').animate({ width: '400px', opacity: 0.5 }, 1000); ``` I expected both animations to happen concurrently, but it appears that the width expands first before the opacity begins to change. I also tried chaining another `.animate()` call like this: ```javascript $('#myDiv') .animate({ width: '400px' }, 1000) .animate({ opacity: 0.5 }, 1000); ``` However, this doesn't give me the desired effect either, as it still animates one after the other. I'm using jQuery version 3.6.0 and have checked that there are no conflicting CSS transitions. I've also ensured that there are no JavaScript errors in the console, but I'm still exploring. I want both properties to animate together without a delay. Any suggestions on how to achieve this or if there's something I might be missing? This is part of a larger API I'm building. Has anyone else encountered this? My development environment is Windows.