なぜjQuery .animate（）が不安定になっていますか？

Question

オンhttps://xjour.com私は劇的なナビゲーションアニメーションを持っています。

FFとChromeでジャンプします。

エッジとモバイルでは正常に動作します。

問題を再現するためにJSFiddleを作成しました。

ここでも期待通りに動作します。

ナビゲーションを外すには、リンク上ではなくリンクをクリックしてください。

https://jsfiddle.net/9kak1088/

コードが

function open() { 


     $('.menu').animate({ 
      'width':'17vw' 
     },100) 

     $('html').one('click', close) 
} 

function close() { 

     $('.menu').animate({ 
      'width':'2.994vw' 
     },100) 


     $('.menu').one('click',open) 
} 

$('.menu').one('click',open); 

Answer 1

以外の何ものでもありません、私は失敗したため、安全なコネクションのあなたの例のサイトにアクセスできませんでしたが、それはフィドルとokです。

jQueryアニメーションは、以前はCSS3より前のOK解決策でしたが、Javascriptに起因するパフォーマンス上の問題が発生する可能性があります。私が理解するところでは、タイムアウト関数に基づいて要素の位置を計算して移動することでアニメーション化されます。それはあなたがアニメーション化する要素の数や、JavaScriptが実際には他のときに忙しくなっているかどうかに応じて、本当に不安定になる可能性があります。

ここでの共通の解決策は、特別に作られたCSS3機能を使用することです。最終的にjQueryソリューションを古いブラウザの代替手段として使用できます（CSS3がサポートされている場合は、javascriptで検出するソリューションがあります）。

CSS3トランジションは、CSS属性の移行を設定することで動作します。

.menu{ 
    transition: width 0.1s linear 0s; 
    -moz-transition: width 0.1s linear 0s; 
    -webkit-transition: width 0.1s linear 0s; 
    -o-transition: width 0.1s linear 0s; 
    -ms-transition: width 0.1s linear 0s; 
} 

そして、属性値が変更されたとき、broswerが自動的にそれをアニメーション化：ここ

$('.menu').css({ 
    'width':'41vw' 
}); 

はフィドルです： https://jsfiddle.net/fz4pwwjj/2/