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>

SCRIPT

$( "#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同时执行（它们是异步的），这通常会导致意外和不吸引人的结果。这两个函数都提供了可选的回调，您应该使用这些回调，以便在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);
    });    

});

fadeOut / In函数产生闪烁

1 个答案: