平滑的動畫沒有滯後

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>