Javascript 无滞后的平滑动画

我只是创建了一个网站，我有一个问题，改变了很多

这是网站网址：

问题是，当我们单击菜单图标时，会触发侧菜单动画，并且侧菜单在jquery动画中可见

这是js文件：

    $(document).ready(function()
    {
         $( "#show-menu" ).click(function() 
         {
            $('.content .column').animate(
            {
              width: '33.333%'
            }, 500);

            $('.first-side-menu').animate(
            {
              width: '0px'
            }, 500);

            var newWidth = $('body').width() - 280;
            $('.side-menu').css("display", "block");
            $('.side-menu').animate(
            {
              width: '280px'
            }, 500);
            $('.content').animate(
            {
              width: newWidth,
            }, 500);
            if($('.photopreview').css("display") == "none" || $('.photopreview').css("display") === undefined)
            {
                $('.content').css("overflow-y", "scroll");
            }
    });

});

---

问题在于动画不是平滑的，没有延迟。

jQuery的动画速度很慢。最好用CSS制作动画。下面的代码切换主内容和侧菜单的类

$document.readyfunction{ $show-menu.clickfunction{ $.side-menu.toggleClassshow； $.container.toggleClasshide； }; }; .包装纸{ 显示器：flex； } 显示菜单{ 光标：指针； } .集装箱{ 背景：浅灰色； 宽度：calc100%-50px； 过渡：宽度1s； } .配菜{ 背景：暗射线； 宽度：50px； 过渡：宽度1s； } .表演{ 宽度：280px； 过渡：宽度1s； } .隐藏{ 宽度：calc100%-280px； 过渡：宽度1s； } 点击 容器

---

杰拉德回答你的问题了吗？如果是，请接受他的回答。