javascript - 流畅的动画没有滞后

Question

我刚刚创建网站，但遇到了一个变化很大的问题。

这是网站网址:http://www.mphotography.lt

问题是当我们点击菜单图标时，侧边菜单动画被触发，侧边菜单通过 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");
            }
    });

});

问题是动画不流畅且没有延迟。

Answer 1

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

$(document).ready(function() {
  $("#show-menu").click(function() {
    $(".side-menu").toggleClass("show");
    $(".container").toggleClass("hide");
  });
});

.wrapper {
  display: flex;
}

#show-menu {
  cursor: pointer;
}

.container {
  background: lightgray;
  width: calc(100% - 50px);
  transition: width 1s ease;
}

.side-menu {
  background: darkgray;
  width: 50px;
  transition: width 1s ease;
}

.show {
  width: 280px;
  transition: width 1s ease;
}

.hide {
  width: calc(100% - 280px);
  transition: width 1s ease;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="side-menu"><span id="show-menu">Click</span></div>
  <div class="container">Container</div>
</div>