jquery - 淡出/淡入功能会产生闪烁

Question

我使用标题值在单击按钮时显示/隐藏一些 div。第一个按钮将仅显示具有 ab 值的 div，第二个按钮将显示所有 div。一切(有点)都有效，但是当显示所有 div 时，fadeOut/In 会产生令人讨厌的闪烁...(您可以在这个 JSFIDDLE 中看到它)

HTML

<button id="ab">AB</button>
<button id="all">ALL</button>
<hr>
<div class="work" title="ab">AB</div>
<div class="work" title="dc">DC</div>
<div class="work" title="ab">AB</div>
<div class="work" title="dc">DC</div>

脚本

$( "#ab" ).click(function(){
    $( ".work" ).fadeOut(400);    
    $( ".work[title *='ab']" ).fadeIn(400);
});

$('#all').click(function(){
    $( ".work[title *='ab']" ).fadeOut(400);
    $( ".work" ).fadeIn(400);
});

Answer 1

您的问题是 fadeOut 和 fadeIn 同时执行(它们是异步的)，这通常会导致意外且不吸引人的结果。这两个函数都提供可选的回调，您应该利用这些回调，以便在淡出完成后发生淡入。

示例:

$( "#ab" ).click(function(){
    $( ".work" ).fadeOut(400, function(){
       // This anonymous function executes after fadeOut has finished.  It is provided
       // as a callback to fadeOut.
       $( ".work[title *='ab']" ).fadeIn(400);
    });    

});