遅れのない滑らかなアニメーション

Question

私はちょうどウェブサイトを作成し、私は多くを変える問題がある。

これは、ウェブサイトのURLです：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>