javascript - 缓慢的 jQuery 动画 - 改变宽度

Question

我有两个 div。一个当前为 0%，另一个为 100%。通过点击功能，我将它们转换为12%和88%。

就像魅力一样，但我希望“过程”是缓慢的，而不是即时的。就像一个小动画。

这是我的代码:

<script>
$(document).ready(function(){
  $(".menu_logo").click(function(){
    $(".right").css("width","88%");
    $(".left").css("width","12%");
    $(".menu_logo").css("display","none");
   });
});
</script>

Answer 1

使用 CSS 过渡。将以下属性添加到您的 .right 和 .left 类中。

CSS

-webkit-transition: width 150ms linear;
o-transition: width 150ms linear;
transition: width 150ms linear;