jQuery动画在开始完成前不会等待

Question

我一直致力于在导航栏中单击淡入淡出div，但我无法使动画函数的“完整”输入正常工作。我的解决方案是延迟添加（我提供了代码和JSFiddle），但这对我来说似乎是一个糟糕的解决方案。我想知道是否有人能够向我解释诸如.fadeIn（）和.fadeOut（）之类的“完整”输入？

我使用了下面的例子，发现淡入会在淡出完成之前开始，导致div中的跳转，这是我试图避免的。

$(function() { 
    $('#tabCarts').click(function() { 
     $('div[id^="body"]').fadeOut(140, function() { 
      $('#bodyCarts').fadeIn(140); 
     }); 
    }); 
    $('#tabSearch').click(function() { 
     $('div[id^="body"]').fadeOut(140, function() { 
      $('#bodySearch').fadeIn(140); 
     }); 
    }); 
    $('#tabRequests').click(function() { 
     $('div[id^="body"]').fadeOut(140, function() { 
      $('#bodyRequests').fadeIn(140); 
     }); 
    }); 
}); 

这是我做的演示的基本标记。

<ul> 
    <li><a href="#" id="tabCarts"> Carts</a> 

    </li> 
    <li><a href="#" id="tabSearch"> Search</a> 

    </li> 
    <li><a href="#" id="tabRequests"> Requests</a> 

    </li> 
</ul> 
<div id="bodyCarts" class="bodyTab">Carts</div> 
<div id="bodySearch" class="bodyTab">Search</div> 
<div id="bodyRequests" class="bodyTab">Requests</div> 

而这里是我的JSFiddle Entry所以你可以看到我在说什么。

我的解决方案涉及在淡入淡出之前拖延，并让它们同时运行，但这对我来说就像是一个糟糕的答案。

感谢您的答案！

Answer 1

过早触发回调的原因是您将隐藏动画绑定到已隐藏的元素。它们中的一些立即完成。

要解决此问题，您需要通过$('div[id^="body"]:visible')选择器仅选择可见元素。

这里还有一个问题。由于您现在只选择可见元素，因此至少需要其中一个元素首先可见。这就是为什么我在开始的时候添加了额外的fadeIn。

http://jsfiddle.net/RdwUS/5/

$(function() { 
    $('#bodyCarts').fadeIn(140); 
    $('#tabCarts').click(function() { 
     $('div[id^="body"]:visible').fadeOut(140, function() { 
      $('#bodyCarts').fadeIn(140); 
     }); 
    }); 
    $('#tabSearch').click(function() { 
     $('div[id^="body"]:visible').fadeOut(140, function() { 
      $('#bodySearch').fadeIn(140); 
     }); 
    }); 
    $('#tabRequests').click(function() { 
     $('div[id^="body"]:visible').fadeOut(140, function() { 
      $('#bodyRequests').fadeIn(140); 
     }); 
    }); 
});