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>

平滑的动画没有滞后

1 个答案: