divの幅は2番目のonclickまでロードされません

Question

要するに、私はサイドメニューを50pxまでロールアップする擬似コードを書いています。さらに、widthパラメータが50pxのときに警告を表示するという条件を記述しました。それは2番目のonclickでのみ動作するという事実でなければ、すべてが大丈夫です。親divをラップするときにwidthの値がすでに50pxになっていて、onclickがダウンロードされるまでではないというこの値を動的にロードする可能性はありますか？

$("#hide").on("click", function() { 
 
\t \t $("#options-menu").fadeOut("fast"); 
 
\t \t $("#nav-left").animate({width: 50},500); 
 
\t \t slideMenu(); 
 
}); 
 
    
 
function slideMenu() { 
 
\t \t width = $("#nav-left").width(); 
 
\t \t if (width == 50) { 
 
\t \t \t alert('it works'); 
 
\t \t } 
 
}

#nav-left { 
 
height: 500px; 
 
width: 200px; 
 
background: #eaeaea; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="nav-left"> 
 
\t \t <div id="nav-title"> 
 
\t \t \t <button id="hide">HIDE</button> 
 
\t \t </div> 
 
</div>

Answer 1

animate jquery関数のcomplete callbackを使用してください。 詳細はこちらをご覧ください。 http://api.jquery.com/animate/

$("#hide").on("click", function() { 
 
\t $("#options-menu").fadeOut("fast"); 
 
\t $("#nav-left").animate({width: 50},500, null, function(){ 
 
      slideMenu(); 
 
     });  \t \t 
 
}); 
 
    
 
function slideMenu() { 
 
\t width = $("#nav-left").width(); 
 
\t if (width == 50) { 
 
\t  alert('it works'); 
 
\t } 
 
}

#nav-left { 
 
height: 500px; 
 
width: 200px; 
 
background: #eaeaea; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="nav-left"> 
 
\t \t <div id="nav-title"> 
 
\t \t \t <button id="hide">HIDE</button> 
 
\t \t </div> 
 
</div>

Answer 2

あなたはhttp://api.jquery.com/animate/

を見なければならない「完全な」アニメーションの終了時に呼び出されるコールバック関数です - あなたがそこにあなたの警報ロジックを置く必要があります。

Answer 3

アニメーション効果を利用するために500ミリ秒を費やしたので、そのようなことが起こります。それが行われるアニメーションまで待つことはありません、それはあなたが何ができるかslidemenu()

いわゆるでいるあなた、他の関数を呼び出しますようにJavaScriptは、あなたがこのようslidemenu()関数を呼び出す前に500msの遅延を置くことができ、非同期です：

$("#hide").on("click", function() { 
     $("#options-menu").fadeOut("fast"); 
     $("#nav-left").animate({width: 50},500); 
     setTimeout(function(){slideMenu();},500); // This is what I have mentioned above. 
}); 

function slideMenu() { 
     width = $("#nav-left").width(); 
     if (width == 50) { 
      alert('it works'); 
     } 
} 

Answer 4

あなたはanimation complete

$("#hide").on("click", function() { 
 
    $("#options-menu").fadeOut("fast"); 
 
    $("#nav-left").animate({ 
 
    width: 50 
 
    }, 500, slideMenu); 
 
}); 
 

 
function slideMenu() { 
 
    width = $("#nav-left").width(); 
 
    if (width == 50) { 
 
    console.log('it works'); 
 
    } 
 
}

#nav-left { 
 
    height: 500px; 
 
    width: 200px; 
 
    background: #eaeaea; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="nav-left"> 
 
    <div id="nav-title"> 
 
    <button id="hide">HIDE</button> 
 
    </div> 
 
</div>

後slidemenu機能を実行することができます