javascript - このアニメーション コールバックがアニメーションが完了するまで待機しないのはなぜですか?

Question

両方のアニメーションが同時に呼び出されています (複数回の場合もあります)。

<div id="home-bt" class="button"></div>
<div id="about-bt" class="button"></div>
<div id="beauty-bt" class="button"></div>
<div id="pamper-bt" class="button"></div>
<div id="gallery-bt" class="button"></div>
<div id="news-bt" class="button"></div>
<div id="contact-bt" class="button"></div>
</div>

</div>
<div class="page-container" id="home">
home

</div>
<div class="page-container" id="about">
about

</div> etc...

$(document).ready(function() {
  $(".page-container").hide();


 $("#home-bt").click(function() {
$(".page-container").hide(2000, function(){
    $("#home").show("slow");
  });  }); etc.....

私もこれを試しましたが、同じ結果でした...

$(document).ready(function() {
  $(".page-container").hide();


 $("#home-bt").click(function() {
$("#about,#beauty,#pamper,#gallery,#contact,#news").hide(2000, function(){
    $("#home").show("slow");
  });  });

Answer 1

次のようなものを実装すると機能します。

  var waiter = setInterval(function () {
                            if (!$('#something').is(":animated")) {
                                clearInterval(waiter);
                                $('#animateafterwait').show("fade", {}, 1000);
                            }
                        }, 300);