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);

Answer 2

因为您最初通过添加.page-container

隐藏了$(".page-container").hide();

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

Fiddle here

为什么这个动画回调不会等到动画完成？

2 个答案: