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

因为您最初.page-container通过添加隐藏了$(".page-container").hide();

如果您在选择器上单击一次然后再次单击，则它会等待指定的时间显示它。

在这里提琴

Answer 2

如果你实现这样的东西，它会起作用：

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