jQueryのサイズ変更は、起動時に醜い「ジャンプ」を引き起こします

Question

私はba-resize jQuery pluginを使って、サイドバーメニューの動的サイズ（ '#menu'）に基づいてウェブサイトのコンテンツdiv（ '＃page-content'プラグインは、バインディングのサイズ変更イベントハンドラをdivにすることを許可します。

これはほとんどの場合動作しますが、2つのdivがサイズを調整すると、目に見えるビジュアルジャンプが発生します。ショートスクリーンキャストを参照してください：http://recordit.co/BjIYaS36oW（音が出ない）

時々、ジャンプはメニューを完全に読み込むことに失敗します。

サイズ変更時にこのちらつきを修正/除去するにはどうすればよいですか？

私のjQuery：

// Adjusting content width to allow for responsive size with changing menu width 
$(function(){ 
    $('#menu').resize(function(){ 
     $('#page-content').css({'width':(($(window).width()))-'#menu'}); 
     $("#page-content").css('marginLeft',''); 
     $("#page-content").css('marginRight',''); 
    }); 
}); 

$(document).ready(function(){ 
    var callback = function() { 
     var h = $(window).width(); 
     var k = $('#menu').width(); 
     $('#page-content').width(h-k); 
     }; 
     $(document).ready(callback); 
     $(window).resize(callback); 
}); 

私はここにいくつかの醜いスクリプトを持っている疑いがある - 私はjQueryのウィザードではないんだ - と私は任意のアイデアを感謝しています。私はステージングウェブサイトへのURLを共有することができます（コメント内の）。

Answer 1

このタスクでは、通常、イベントベースのアプローチを使用します。

まず、jQuery.animate関数を使用して、CSSのサイズ変更に移動時間を追加できます。 「ジャンプ」は、即座にサイズ変更を行う試みであるため、スナップ動作は驚くべきものではありません。

次に、2つのイベントを交互に行うには、jQuery.one関数を使用します。 2つの別々のイベントを指定します.1つはメニューdivの幅プロパティを変更するイベント、もう1つはイベントdivを削除するイベントです。

jQuery(".menu_toggle").one("click", handler1); 
       function handler1() { 
        //Expand Menu 
        jQuery(".menu_toggle").one("click", handler2); 
       } 

       function handler2() { 
        //Collapse Menu 
        jQuery(".menu_toggle").one("click", handler1); 
       }